詳解 CSS 居中布局技巧

水平居中元素：

• 通用方法，元素的寬高未知

方式一：CSS3 transform

.parent {n position: relative;n}n.child {n position: absolute;n left: 50%:n transform: translateX(-50%);n}n

方式二：Flex 布局

.parent {n display: flex;n justify-content: center;n}n

適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。

• 居中的元素為常規文檔流中的內聯元素(display: inline)

常見的內聯元素有：span, a, img, input, label 等等

.parent {n text-align: center;n}n

此方法同樣適用於 display: inline-block 的元素。

常見的塊元素：div, h1~h6, table, p, ul, li 等等

方式一：設置 margin

.parent {n width: 100%;n}n.child {n width: 600px;n height: 50px;n margin: 0 auto;n background: #999;n}n

此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。

方式二：修改為 inline-block 屬性

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

• 居中的元素為浮動元素

.child {n width: 100px;n float: left;n position: relative;n left: 50%;n margin-left: -50px;n}n

• 居中的元素為絕對定位元素

方式一：

.parent {n position: relative;n}n.child {n position: absolute;n width: 100px;n left: 50%;n margin-left: -50px;n}n

方式二：

.parent {n position: relative;n}n.child {n position: absolute;n width: 100px;n left: 0;n right: 0;n margin: 0 auto;n}n

垂直居中元素：

• 通用方法，元素的寬高未知

方式一：CSS3 transform

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

方式二：Flex 布局

.parent {n display: flex;n align-items: center;n}n

適用於子元素為浮動，絕對定位，內聯元素，均可垂直居中。

• 居中元素為單行文本

.text {n line-height: 200px;n height: 200px;n}n

把文字的 line-height 設為文字父容器的高度，適用於只有一行文字的情況。

• 已知元素寬高

方式一：

.parent {n position: relative;n}n.child{n position: absolute;n top: 50%;n height: 100px;n margin-top: -50px;n}n

方式二：

.parent {n position: relative;n}n.child{n position: absolute;n top: 0;n bottom: 0;n height: 100px;n margin: auto 0;n}n

垂直居中元素：

• 1. 絕對居中定位

div {n width: 100px;n height: 100px;n margin: auto;n position: fixed;n //absolute is okn top: 0;n right: 0;n bottom: 0;n left: 0;n}n

優點：

1. 不僅可以實現在正中間，還可以在正左方，正右方

2. 元素的寬高支持百分比 % 屬性值和 min-/max- 屬性
3. 可以封裝為一個公共類，可做彈出層
4. 瀏覽器支持性好

• 2. 負邊距居中

.child {n width: 100px;n height: 100px;n position: absolute;n top: 50%;n left: 50%;n margin-left: -50px;n margin-top: -50px;n}n

特點：

1. 良好的跨瀏覽器特性,兼容 IE6 - IE7

2. 靈活性差，不能自適應，寬高不支持百分比尺寸和 min-/max- 屬性

• 3. Transform 定位

.child {n width: 100px;n height: 100px;n position: absolute;n top: 50%;n left: 50%;n transform: translate(-50%, -50%); n}n

特點：

1. 內容可自適應，可以封裝為一個公共類，可做彈出層

2. 可能干擾其他 transform 效果

• 4. Flexbox 布局

.parent {n display: flex;n justify-content: center;n align-items: center;n}n

這是 CSS 布局未來的趨勢。Flexbox 是 CSS3 新增屬性，設計初衷是為了解決像垂直居中這樣的常見布局問題。

• 5. table-cell 居中

.parent {n display: table-cell;n vertical-align: middle;n text-align: center;n width: 200px;n height: 200px;n border: 1px solid red;n}n.child {n width: 100px;n height: 100px;n display: inline-block;n background-color: #03f;n}n

適用於子元素 display 為 inline-block, inline 類型的元素，需要已知父元素的寬高，且父元素的寬高不能設為百分比數。

• 6. font-size 配合 vertical-align 實現垂直居中

.parent {n font-size: 175.4px;n height: 200px;n text-align: center;n}nn.child {n vertical-align: middle;n display: inline-block;n font-size: 12px;n width: 50px;n height: 50px;n background-color: #00f;n}n

該方法的要點是給父元素設一個合適的 font-size 的值，這個值的取值為該父元素的高度除以 1.14 得到的值，並且子元素必須 是一個 inline 或 inline-block 元素，需要加上 vertical-align: middle 屬性。使用這種方法，子元素的寬度或高度都不必知道。

具體原理可以上網搜 vertical-align 垂直居中。

• 7. 文本內容居中

text {n height: 100px;n line-height: 100px;n text-align: center;n}n

推薦閱讀：