CSS中實現水平/垂直居中

在CSS中實現水平居中相對簡單，但是卻沒有一個明確的屬性表示這是實現垂直居中的，這就導致垂直居中的實現相對初學者來說難上許多。但是在實際的開發中垂直居中的需求常常出現，例如一行中有左右兩部分，左邊是圖片，右邊是文字，這時需要左右兩部分按照垂直居中對齊（新聞列表的樣式）等等。

---

注：

<style> html, body{height: 100%; }.wap{height: 100%; } </style>

以上代碼只是為了讓wap可以占據整平的高度，讓居中效果看的更加清晰，對于居中的實現并沒有關系。

為什么wap占據整屏幕需要html,body{ height: 100%} 然后在設置.wap{height: 100%}呢？而寬度要占據整屏幕.wap{ width: 100% }，如果是block元素不設置也可以占滿。

因為height和width的百分比值計算方式不一樣，如果父元素的height: auto子元素的height百分比值是不起作用的，但是相反，width的百分比值在width: auto的父元素下卻可以正確計算。
而添加的元素都是在html和body的子元素，但是默認html和body的height是auto，并沒有明確設置高度，那么子元素設置高度值為百分比自然是不起作用了。

---

水平居中對齊

方法一：使用 margin: 0 auto

該方法水平居中一個寬度固定的元素，使用了margin: 0 auto; 的方法，該方法并不能居中一個寬度沒有明確設置的元素（依靠自身子元素撐起寬度），方法如下：

<style>.inner{width: 100px; height: 20px;background: #ccc;margin: 0 auto;} </style> <div class="wap"><p class="inner"></p> </div>

方法二：使用絕對定位加上margin-left負值

同樣適用于寬度固定的元素，如果寬度不固定就不能得知margin-left的值究竟是多少，也就無法居中。方法如下

<style>.wap2{position: relative;height: 20px;}.inner2{position: absolute;left: 50%;margin-left: -50px; /* 注意這里，整個元素的左邊界在父元素的50%處，然后向左縮進自身的一半，這樣自身的中心就在父元素的50%處了。 */width: 100px; height: 20px;background: #ccc;} </style> <div class="wap2"></div>

方法三：絕對定位

一樣只是適用于寬度固定的元素，如果被居中元素沒有明確設置寬度，那么該元素就會占滿position: relative; 的父元素（占滿也可以說是居中了），注意margin: auto; 沒有該屬性即使寬度固定也不會成功居中。

<style>.wap3{position: relative;background: #333; }.inner3{position: absolute;left: 0;right: 0;width: 20px;margin: auto;/* 以上為重要代碼，要加上margin: auto; 這個不可或缺 */ height: 20px;background: #ccc; }</style> <div class="wap3"><div class="inner3"></div> </div>

方法四：居中行內元素

該方法不僅僅適用于寬度固定的元素，也可以用作自身寬度不固定的元素，其實就是水平居中了一個行內元素，像居中文本一樣，所以即使寬度不固定也沒關系。

<style> .wap3{text-align: center; }.inner3{display: inline-block; /*如果html元素是block，因為text-align只能作用域行內/行內塊元素*/height: 30px;background: #ccc; } <style> <div class="wap3"><div class="inner3">我是水平居中的</div> </div>

垂直居中對齊

方法一：使用絕對定位加上負的margin值

原理同水平居中的方法二，讓自身定位到高度的一半處，然后再像反方向移動自身高度的一半，所以需要居中的元素的高度要是已知的。
注：父元素高度可以未知，top 的百分比值可以計算出來自己的位置和子元素寬度百分比值一樣。

<style> html, body{height: 100%; } .wap{position: relative;height: 100%;background: #333;} .inner{position: absolute;top: 50%;margin-top: -10px;width: 20px;height: 20px;background: #ccc; } </style><div class="wap"><div inner></div> </div>

方法二：使用單元格垂直居中內容的特性

讓元素模擬表格的單元格行為，單元格會自動垂直居中子元素無論子元素的display屬性值是什么。
注: display: table-cell; 需要和 vertical-align: middle; 同用

<style> html, body{height: 100%; }.wap3{display: table-cell;vertical-align: middle;/*以上兩句是關鍵*/width: 100px;height: 100%;background: #333; }.inner3{background: #ccc; }</style> <div class="wap3"><div class="inner3">我是垂直居中的</div> </div>

方法三：使用絕對定位四個方位值為0，加上margin: auto 就會居中的特性

同水平居中的方法三

<style> html, body{height: 100%; }.wap3{height: 100%;background: #333; }.inner3{position: absloute;top: 0;bottom: 0;margin: auto;width: 20px;height: 20px;background: #ccc; } </style><div class="wap3"><div class="inner3">我是垂直居中的</div></div>

方法四：基于行內元素的對齊方式

該方法較為復雜，但是靈活度卻是最好，該方法對于wap和inner的高度沒有要求。

該方法用到的機制簡單來說就是行內元素的對齊，正常情況下行內元素是按照基線對齊的，而vertical-align改變了行內元素的對齊方式為中線對齊，但是中線在正常情況下并不是元素的中心，雖然差別很小，所以使用了 font-size: 0;。
wap的行內子元素并且設置vertical-align: middel;都要和::after偽元素居中對齊。同時該偽元素的高度又和wap的高度相同，那么改為元素高度的中心就是wap高度的中心，和偽元素居中對齊就在wap的中心了。
原理較為復雜詳見張鑫旭老師的博文。

<style> html, body{height: 100%; } .wap3{font-size: 0;background: #ccc;height: 100%; } .wap3::after{content: "";height: 100%;font-size: 0;vertical-align: middle;display: inline-block; } .inner3{font-size: 12px;display: inline-block;vertical-align: middle; } </style> <div class="wap3"><div class="inner3">我要垂直居中</div> </div>

方法五：使用flex布局

使用flex布局，這種方式實現起來比較簡單。想要深入學習flex布局轉阮一峰老師這篇博文

<style> html, body{height: 100%; }.wap4{display: flex;align-items: center;height: 100%;}.inner4{} </style> <div class="wap4"><div class="inner4">我是垂直居中的</div> </div>

總結

以上是生活随笔為你收集整理的CSS中实现水平/垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。