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

還記得上兩篇寫的如何水平居中的五個方法和如何垂直居中的三個方法嗎？不記得的可以回憶一下，因為今天這一篇寫水平垂直居中的方法基本上說法前兩篇方法的結合了。

先來大概複習一下前面涉及的内容：

1. 水平和垂直居中我們都用到了：absolute transform解決辦法。

2. 水平居中我們還用到了textAlign=center居中行内塊級元素，也用到了flex及其屬性布局。

3. 垂直居中我們還用到了table-cell和屬性verticalAlign=middle等。

沒錯，關于這一篇的内容水平垂直居中就結合這些方法來處理同樣的DEMO。如下所示：

DEMO - demo的初始樣式可以在下面方法代碼中查看。

一、absolute transform

這兩個屬性值屬性的應用在水平和垂直方法中都有用到，這裡其實就是結合這兩種用法。看一下代碼：

這種處理方法值得注意的地方是，它的優點是子元素不會對其他元素産生影響。缺點是在PC上注意一下兼容性問題。常用于移動端的布局。

二、水平inlineBlock textAlign和垂直tableCell verticalAlign

溫習之前的内容：

1、關于水平方向上：使用父元素textAlign居中子子元素的行内塊級元素（inlineBlock）。

2、關于垂直方向上：兩個屬性都設置在父元素上。将父框轉化為一個表格單元格式，再通過屬性使用其内容垂直居中。

看一下清晰的代碼，哈哈：

這個處理辦法兼容性還是比較好的。

三、fex justifyContent alignItems

直接在父元素上使用css3布局利器fex中的兩個水平垂直居中的屬性。非常簡單，看一下代碼：

這種方式的最大優點就是隻需要設置父元素屬性就行。缺點是需要注意兼容性問題。

到了總結的時候：

不管是是水平還是垂直還是水平垂直居中，得知道常用的一些處理方式，就是你做這個行業，每天都要寫的。最基本的東西。簡單總結了一下，希望看的不花太多時間看完了也知道了學到了。呵呵！

,

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

查看全部