CSS控制居中是前端開發中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。

談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文檔流是水平方向的，所以水平方向上的布局控制比垂直方向要簡單很多，居中也是如此。不過（水平）垂直居中還是有很多種寫法，至少一隻手是數不過來了，本文列出幾種，并進行簡單比較。

一、水平居中

使用CSS控制水平居中很簡單：

• 塊級元素 設置width,并設置margin auto
• 内聯元素 父元素設置text-align center
• HTML代碼如下:

<div class="container"> <div class="content"> 水平居中哦 </div> </div>

1. 塊級元素水平居中

.container { height: 300px; width: 300px; border: 1px solid red; } .content { width: 10rem; border: 1px solid green; margin: 0 auto; }

效果：

2. 内聯元素水平居中

.container { height: 300px; width: 300px; border: 1px solid red; text-align: center; } .content { display: inline-block; border: 1px solid green; }

效果：

代碼很簡單，而且沒什麼兼容性問題，所以通常也不需要用别的複雜方式來實現水平居中效果。

二、水平垂直居中

使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那麼方便，這裡主要羅列幾種。

1. flex布局

flex布局出現以後，垂直居中就很方便了，直接設置父元素：

display flex align-items center

如果同時要水平居中，則同時設置：

justify-content center

需要注意的是IE10 才支持，webkit前綴浏覽器設置flex屬性需要加webkit。

.container { width: 300px; height: 300px; border: 1px solid red; display: -webkit-flex; display: flex; // 關鍵屬性 align-items: center;　// 垂直居中 justify-content: center // 水平居中 } .content { border: 1px solid green; }

2. margin position:absolute布局

position: absolute布局的元素，通過設置top/bottom, left/right這兩對屬性，可以讓元素在垂直方向和水平方向分别具有了自适應的特性。就像div在水平方向的默認表現一樣!

上文中對于塊級元素的水平居中，我們設置寬度然後配合以margin可以實現水平居中。而對于設置了top/bottom,left/right的absolute定位元素，我們設置寬高再配合margin就可以達到水平垂直居中：

.container { width: 300px; height: 300px; position: relative; border: 1px solid red; } .content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 100px; margin: auto; border: 1px solid green; }

效果：

兼容性很好，IE8以上支持。

3. transform absolute

absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進行定位；transform是CSS3中非常強大的一個屬性，可以接收多個屬性值，包括旋轉、縮放、平移等多種功能。這裡使用二者配合，先将子元素左上定點定位到父元素中心點，再使用transform将子元素中心點移動到父元素的中心點即可：

.container { width: 300px; height: 300px; position: relative; border: 1px solid red; } .content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid green; }

效果：

這個方法有個小缺陷，就是translate函數的參數，最後的計算值不能為小數，否則有的浏覽器渲染出來效果會模糊，所以使用本方法的話最好設置一下寬高為偶數。

4. absolute margin負值

與上一種方法很類似，上一種方法是使用transform将元素向左上平移，本方法則是使用margin負值的方式将元素拉向左上角。

代碼：

.container { width: 300px; height: 300px; position: relative; border: 1px solid red; } .content { position: absolute; left: 50%; top: 50%; width: 200px; height: 100px; margin-top: -50px; margin-left: -100px; border: 1px solid green; }

效果：

5. absolute calc

從上兩種方法可以看到，absolute設置了left和top再通過平移或者margin将元素重新定位回去。如果我們直接可以計算出正确的left和top值，豈不是一次到位？calc函數正有此功能，當然我們需要知道子元素的寬高：

.container { width: 300px; height: 300px; border: 1px solid red; text-align: center; position: relative; } .content { position: absolute; border: 1px solid green; width: 200px; height: 100px; left: calc(50% - 100px); top: calc(50% - 50px); }

效果：

6. line-height vertical-align

vertical-align是一個作用于内聯元素的屬性。内聯元素的特性是會和其它内聯元素或者文字在同一行顯示，但是默認情況下是與父元素“基線對齊”的。這裡的的基線指的是父元素每一行中的一個垂直位置，是英文ｘ下邊緣所在的水平, 通過設置vertical-align為middle可以将内聯元素的中部對齊父元素的中部（基線 字母ｘ的一半高度）。所以可以利用這一點，将父元素的行高設置為其自身高度，然後将子元素與父元素中線對齊，即可實現垂直居中。

代碼：

.container { width: 300px; height: 300px; border: 1px solid red; line-height: 300px; text-align: center; } .content { display: inline-block; line-height: 1.5; border: 1px solid green; vertical-align: middle; }

效果：

以上幾種方法各有不同的适用條件，因此也有不同的優缺點，下表對各種方法進行了比較：

方法條件兼容性flex布局無IE10 margin absolute知道子元素寬高IE8 transform absolute無，子元素寬高應為偶數IE10 absolute margin負值知道子元素寬高absolute calc知道子元素寬高IE9 line-height vertical-align知道父元素寬高

CSS中同一種表現效果往往有多種不同的實現方法，要刻意地嘗試多種寫法，避免熟悉了一兩種方法就止步不前，這樣才能對各種情況得心應手

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!