實現居中的幾種方法

在開發的過程中，很多時候我們需要實現居中，所以記錄一下幾種居中的方法。

text-align: center居中是只針對行內元素的，例如 span、a、img、input 、text 等行內元素。

我們有這樣的 html 結構：

inline element

行內居中只需要給父元素設定text-align: center就可以實現。

.parent

注意：對於元素中的塊級元素它是不起作用的。但是可以把塊級元素的display設定為inline-block 或者 inline之後，也是可以生效的，但是需要注意設定inline之後是會丟失一些功能的，比如設定元素的寬高。

通過給自身設定margin: 0 auto可以實現對塊級元素的居中。例如：

.parent

.chilren

和text-align: center一樣，它也可以改變行內元素的display為inline-block來實現行內元素的居中。

使用absolute也是可以實現居中的。但是使用它之後，子元素就不能把父元素撐起來了。需要自己確定父元素的大小。

.parent

.chilren

首先給父元素新增position: relative這樣子元素就可以通過父元素來實現絕對定位。然後讓元素向右偏移 50%，需要注意，這個時候居中的是子元素的左邊線。所以這時候就需要使用transilatex(-50%)讓元素再相對自己向右位移 50%，這樣就能完美實現居中啦。（這個方法在垂直居中的時候同樣適用）

使用彈性布局也可以很方便的實現水平居中（和垂直居中）。

看下例子：

.parent

.chilren

用 flex 來實現居中真的很方便，也是網頁布局的一大利器~好用的不得了。對於 flex 不了解的，可以參考阮一峰老師的這篇文章：flex 布局教程：語法篇。

這兩個方法用來實現垂直居中也是非常方便的。

positon: absolute;

通過決定定位實現垂直居中的方法和實現水平居中基本沒什麼兩樣，只需要向下偏移 50%，然後相對自身向上偏移 50% 就可以了。看**：

.parent

.chilren

這邊使用了translate3d這個屬性，三個值分別對應了 x、y、z 軸方向的位移。這樣我們就完美的實現元素的居中啦~

margin-top: 50%;

根據絕對定位實現居中，也可以聯想到使用margin-top: 50%和transform: translatey(-50%)來實現垂直居中，道理是差不多的。**就不放了，相信會使用絕對定位實現居中的就會這個啦。

display: flex;

這個很簡單，直接看**吧。看過阮一峰老師文章就懂了，寫的很詳細，我就不多贅述了。

.parent

.chilren

因為行高的垂直居中性，所以在行內的元素都是會居中的。那麼使用line-height等於父元素高度也可以實現元素的居中。

啦啦啦，line-height

.parent

.chilren

這個方法在實現文字垂直居中的時候是非常方便的。

暫時就先記錄這麼多常用的居中方法，以後有其他好用的方法的話會進行補充。

實現居中的幾種方法

css 實現居中的幾種方式

利用css實現居中的方法

margin auto實現居中

實現居中的幾種方法

css 實現居中的幾種方式

利用css實現居中的方法

margin auto實現居中

相關推薦