如何垂直居中一个浮动元素？如何垂直居中一个<img>?

如何垂直居中一个浮动元素

1、方法一：

.child{
	width: 100px;
	height: 100px;
	background-color:darkcyan;
	float: left;
	position: absolute;//父元素相对定位
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

2、方法二

.child{
	width: 100px;
	height: 100px;
	background-color:darkcyan;
	float: left;
	position: absolute;
	top:50%;
	left:50%;
	margin-top: -50px;
	margin-left: -50px;
}

3、方法三：

.child {
	width: 100px;
	height: 100px;
	background-color: darkcyan;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

如何垂直居中一个img ？

1、方法一

//<img>的容器
.img-container{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

2、方法二

.img-container{
	display: flex;
	justify-content: center;
	align-items: center;
}