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的策略更加優越