CSS居中布局的解决方案

一、水平居中布局

HTML模板如下：

<div class="parent">
	<div class="child"></div>
</div>

1. text-align属性

.parent {
	text-align: center;
}
.child {
	display: inline-block;
}

text-align仅对文本内容有效，此处因为将div.child设置为了行内块级元素，所以该盒子能够被居中。

【优点】浏览器兼容较好
【缺点】子元素的所有文本都会被居中（解决方法：在子元素中重新定义text-align）

---

2. margin属性

.child {
	display: table; /* block亦可 */
	margin: 0 auto;
}

将margin的上下边距设置为0，左右边距自动适应（平分），将能够实现自动居中。该方法对内联元素无效，需要将display设置为block或者table。

【优点】设置简单，只需要对子元素进行操作
【缺点】子元素脱离文档流时（例如设置了浮动），margin属性将失效

---

3. position属性

.parent {
	position: relative; /* absolute和fixed亦可 */
}
.child {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

父元素激活任意定位，子元素再设置绝对定位（该定位将会以父元素为基准），将子元素的左偏移量设置为50%，再将其退回自身width一半的距离即可。
【优点】父级元素脱离文档流后不会影响子元素
【缺点】CSS3新增属性，浏览器兼容较差

二、垂直居中布局

HTML模板如下：

<div class="parent">
	<div class="child"></div>
</div>

1. vertical-align属性

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

vertical-align有三个值——top、middle、bottom，它仅对文本内容有效，此处因为将div.parent设置为了单元格，所以div.child可以作为单元格的内容而被居中。
【优点】浏览器兼容较好
【缺点】父级元素的所有文本都会被居中

---

2. position属性

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

该方法的原理同之前水平居中第三种的方法一致。
【优点】父级元素脱离文档流后不会影响子元素
【缺点】CSS3新增属性，浏览器兼容较差

三、整体居中布局

HTML模板如下：

<div class="parent">
	<div class="child"></div>
</div>

1. vertical-align + margin 组合

.parent {
	display: table-cell;
	vertical-align: middle;
}
.child {
	display: block;
	margin: 0 auto;
}

---

2. position属性

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

两种方案都是对垂直居中和水平居中的组合
方案1的浏览器兼容性更好，方案2的策略更加优越