CSS水平垂直居中布局实现教程

题外话：这是一个让人抓狂的问题。

HTML文档结构如下：

实现效果：

1.（子元素已知宽高）给父容器设置绝对定位（absolute），子元素设置为相对定位（relative），top、left设置为50%，margin-top、margin-left分别设置为高宽的一半的负数。

.outer{
  position:relative;
  width:80%;
  height:400px;
  background:#DCDCDC;
}
.inner{
  width:400px;
  height:200px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-200px; /*width一半的负数*/
  margin-top:-100px; /*height一半的负数*/
  background:green;
  border:2px solid #000000;
}

2.（子元素未知宽高）使用CSS3新特性transform。设置父元素相对定位（relative），子元素绝对定位（absolute），top、left为50%，X轴、Y轴偏移-50%。

.outer{
	position:relative;
	width:80%;
	height:400px;
	background:#DCDCDC;
}
.inner{
	width:30%;
	height:40%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%); /*X负方向移宽度的一半，Y负方向移高度的一半*/
	background:green;
	border:2px solid #000000;
}

3.（子元素未知宽高）父元素相对定位（relative），子元素绝对定位（absolute），top/right/bottom/left均为0，margin为auto。

.outer{
	position:relative;
	width:80%;
	height:400px;
	background:#DCDCDC;
}
.inner{
	width:30%;
	height:40%;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	background:green;
	border:2px solid #000000;
}

4.（父元素已知宽高）父元素设置display为table-cell，文字居中（text-align），垂直居中（vertical-align），子元素根据是否为块级元素设置display为inline-block。

.outer{
	width:600px;
	height:400px;
	display:table-cell;
	text-align:center;  /*水平居中*/
	vertical-align:middle; /*垂直居中*/
	background:#DCDCDC;
}
.inner{
	width:30%;
	height:40%;
	display:inline-block; /*块级元素需设置此行，内联元素不设置*/
	background:green;
	border:2px solid #000000;
}

附：

display属性值table-cell说明：元素会作为一个表格单元格显示，效果类似于。需要注意的是，此属性值的效果会被float，position:absolute破坏，应避免同时使用。