css水平垂直居中(常见)

实际上css水平居中比较容易实现，方法也有很多，但是垂直居中补胎费方便实现，原因也算是当前的盒子模型的一个缺陷吧，但是也只是不方便实现方法也还是有不少，下面说一下常见可用的方法吧

有一下结构

<div class="text">
	<span>Hello World!</span>
</div>

1.table-cell居中

.test{
	display: table-cell;
	vertical-align: middle;
}

可以简单的实现垂直方向上居中

2.flex布局

.test{
	width: 300px;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

flex布局能够实现比较复杂的布局方式，在flex内的项目能够实现各种位置的组合

3.CSS3变形

.test{
	width: 300px;
	height: 300px;
	position: relative;
}
.test span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

css3二维位置转换，此时的-50%是相对元素本身的50%，因此可以实现垂直水平居中无论宽高是否已知

以上三种是在元素宽高未知的情况下实现垂直水平居中的，适用所有元素，在宽高已知的情况下相对来说比较容易实现，如常用文本居中行高与父元素等高可实现垂直居中，负边距可实现垂直水平居中等等，在此就不在赘述