css水平垂直居中

css水平垂直居中的几种方法

要求：子元素和父元素宽高不确定，需要设置子元素水平垂直居中，效果如下图：

这里提供几种简单的实现方法：

1.使用margin:auto属性实现【兼容IE7以上大部分浏览器】

    首先这个元素和它的父元素都要设置定位，其中这个要水平垂直居中的元素需设置绝对定位absolute，然后再给它设置样式{left: 0;right: 0;top: 0;bottom: 0;margin:auto;}。这样便可以实现元素在父容器里垂直居中显示了。

.parent{
	/*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/
	width: 600px;
	height: 500px;
	background: #222222;
	position: relative;
}
.child{
	width: 150px;
	height: 200px;
	background: goldenrod;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

2.使用实现transform属性实现【浏览器兼容性：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE10+】

    同上，设置好定位。然后添加样式{left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}便好了。其中的translateX(-50%)表示将此元素在X轴上向左移50%元素宽度的距离，同理translateY(-50%)将元素在Y轴上向上移50%元素高度的距离。

.parent{
	/*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/
	width: 600px;
	height: 500px;
	background: #222222;
	position: relative;
}
.child{
	width: 150px;
	height: 200px;
	background: goldenrod;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

3.使用flex布局实现【浏览器兼容性：Safari 9+、 Chrome 29+、Firefox 28+、Opera 17+、IE10+】

    首先给父元素设置flex布局{display: flex;}，然后父元素再设置align-items: center;可以使其包裹的子元素在水平方向上水平居中排列，再就是{justify-content: center;}属性规定了子元素在Y轴垂直方向上是居中排列。这样便实现了使用flex完成水平垂直居中的布局。

.parent{
	/*子元素和父元素宽高随意，都可以实现水平垂直居中，这里随便设置了一个宽高撑开盒子容器体积，方便查看效果*/
	width: 600px;
	height: 500px;
	background: #222222;
	display: flex;
	align-items: center;
	justify-content: center;
}
.child{
	width: 150px;
	height: 200px;
	background: goldenrod;
}