點擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

如果一個元素已經設置好了寬高值，那麼要讓它在body或者div容器中垂直水平居中，那或許不困難，例如：使用負margin值實現就是最簡單常用的方式。然而，今天我們要總結的是當一個元素不固定寬高值時，如何讓它垂直水平居中。本篇總結了三個方法。

下面講這三種方法的時候使用的是同一個實例，這個實例的dom結構是這樣的：

方法一：transform屬性

使用css3的transform屬性是我們用的最多的一種解決辦法。具體用法看下面這張代碼圖：

使用translate在X，Y方向上各移動-50%。這個移動距離是相對于自身的寬高來動的。

最後的運行效果是這樣的：

這個方法是最好理解的。

方法二：flex布局

這第二種方法是最簡單的方法，它選用flex布局來處理居中。

關鍵的樣式代碼是這樣的：

父元素設置display:flex，直系子元素設置margin:auto。這個時候我們就可以看到，真系子元素不僅在水平方向居中，垂直方向上也是居中的。

效果是這樣的：

這個方法是最簡單的。

方法三：box布局

第三種方法是使用display:blox布局。相對來說，這個方法稍微複雜了一點，下面我來一解釋，還是上面那個例子的dom結構，如果沒有印象，可以滑到頂部在看看，因為這裡我中會解釋css代碼。

關鍵的樣式代碼是這樣子的：

由上圖可以看出，首先我們給body下的第一級dom（class=dialog__mask）設置了box布局。接着設置了兩個box相關的屬性：

-webkit-box-pack:center

-webkit-box-align:center

其中，box-pack表示父容器裡面子容器的水平對齊方式。box-align表示父容器裡面子容器的垂直對齊方式。這裡設置成都是居中的。關于這兩個屬性取其它值的應用狀态，大家可以網上搜一下，很容易理解。這裡就不展開來占篇幅了。

然後，說一下div.dialog__box的樣式，box-orient定義了子元素水平擺放。而box-sizing有常用的兩個取值：

取值1、box-sizing：border-box

表示：border和padding計算入width之内。寬度值包含了border和padding值。

取值2、box-sizing：content-box

表示：border和padding不計算入width之内。

這個實例使用了取值1。

最後就是下面有個子元素設置了一個屬性box-flex。來規定box的子元素的空間顯示比例。

最後的效果是這樣的：

這個方法是用處最多的。可以讓子元素呈現各種布局。

寫在最後的總結：

用樣式解決不定寬高元素垂直水平居中的問題，這篇文章給出了三種辦法。每一種辦法都不難理解，而且在移動端使用完全不用擔心兼容性問題。感興趣的可以向我要完整代碼，自己運行一下。

以上純屬個人理解，如有不正确地方，歡迎留言指正。

短内容，說完整事，哪怕隻讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！

,

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

查看全部