水平居中

水平居中的頁面布局中最為常見的一種布局形式，多出現于標題，以及內容區域的組織形式，下面介紹四種實現水平居中的方法（注：下面各個實例中實現的是child元素的對齊操作，child元素的父容器是parent元素）

使用inline-block和text-align實現

.parnen{text-align:center; } .child{display:inline-block; }優點：兼容性好； 不足：需要同時設置子元素和父元素；

使用margin:0 auto來實現

.child{width:200px;margin:0 auto;優點：兼容性好； 缺點：需要指定寬度； }

使用table實現

.child{display:table;margin:0 auto;優點：只需要對自身進行設置； 缺點：IE6,7需要調整結構； }

使用絕對定位實現

.parent{position:relative; /*或者使用margin-left的負值為盒子寬度的一半也可以實現，不過這樣就必須知道盒子的寬度，但兼容性好*/ } .child{position:absolute;left:50%;transfrom:translate(-50%); }不足：兼容性差，IE9以上可用

利用flex布局實現

/*第一種方法*/ .parent{display:flex;justify-content:center; } /*第二種方法*/ .parent{display:flex; } .child{margin:0 auto; }不足：兼容性差，如果進行大面積的布局可能會影響效率

垂直居中

vertical-align

我們都知道，每個人都有不同的嗜好，有的人喜歡吃甜食，有的人喜歡吃辣的東西，有的人不喜歡吃芹菜，有的人不喜歡吃羊肉等等。css中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。而vertical-align呢，是個比較挑食的家伙，它只喜歡吃果凍，從小吃果凍長大，沒有了果凍，它就會鬧脾氣，對你不理不睬。我稱之為“果凍依賴性元素”，又稱之為“inline-block依賴性元素",也就是說，只有一個元素屬于inline或是inline-block（table-cell也可以理解為inline-block）水平，其身上的vertical-align屬性才會起作用，我對css-vertical-align的一些理解與認識

在使用vertical-align的時候，由于對齊的基線是用行高的基線作為標記，故需要設置line-height或設置display：table-cell；

/*第一種方法*/ .parent{display:table-cell;vertical-align:middle;height:20px; } /*第二種方法*/ .parent{display:inline-block;vertical-align:middle;line-height:20px; }

使用絕對定位

.parent{position:relative; } .child{position:absolute;top:50%;transform:translate(0,-50%); }

使用flex實現

.parent{display:flex;align-items:center; }

水平垂直全部居中

利用vertical-align。text-align。inline-block實現

.parent{display:table-cell;verticla-align:middle;text-align:center; } .child{display:inline-block; }

利用絕對定位實現

.parent{position:relative; } .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }

利用flex實現

.parent{display:flex;justify-content:center;align-items:center; } 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

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