還記得上兩篇寫的如何水平居中的五個方法和如何垂直居中的三個方法嗎？不記得的可以回憶一下，因為今天這一篇寫水平垂直居中的方法基本上說法前兩篇方法的結合了。
先來大概複習一下前面涉及的內容：
- 水平和垂直居中我們都用到了：absolute+transform解決辦法。
- 水平居中我們還用到了textAlign=center居中行內塊級元素，也用到了flex及其屬性布局。
- 垂直居中我們還用到了table-cell和屬性verticalAlign=middle等。
沒錯，關於這一篇的內容水平垂直居中就結合這些方法來處理同樣的DEMO。如下所示：
DEMO – demo的初始樣式可以在下面方法代碼中查看。
一、absolute+transform
這兩個屬性值屬性的應用在水平和垂直方法中都有用到，這裡其實就是結合這兩種用法。看一下代碼：
這種處理方法值得注意的地方是，它的優點是子元素不會對其他元素產生影響。缺點是在PC上注意一下兼容性問題。常用於移動端的布局。
二、水平inlineBlock+textAlign和垂直tableCell+verticalAlign
溫習之前的內容：
1、關於水平方向上：使用父元素textAlign居中子子元素的行內塊級元素（inlineBlock）。
2、關於垂直方向上：兩個屬性都設置在父元素上。將父框轉化為一個表格單元格式，再通過屬性使用其內容垂直居中。
看一下清晰的代碼，哈哈：
這個處理辦法兼容性還是比較好的。
三、fex+justifyContent+alignItems
直接在父元素上使用css3布局利器fex中的兩個水平垂直居中的屬性。非常簡單，看一下代碼：
這種方式的最大優點就是只需要設置父元素屬性就行。缺點是需要注意兼容性問題。
到了總結的時候：
不管是是水平還是垂直還是水平垂直居中，得知道常用的一些處理方式，就是你做這個行業，每天都要寫的。最基本的東西。簡單總結了一下，希望看的不花太多時間看完了也知道了學到了。呵呵！
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/212746.html
微信掃一掃 
支付寶掃一掃 