本文簡單介紹如何通過CSS實現常見元素的水平、垂直居中。

• 行内元素

這種情況最簡單，隻需要将行内元素包括在一個display屬性為block的父元素中，并且設置父元素text-align為居中即可

.border { width: 400px; line-height: 100px; border: 1px solid red; text-align: center; }

<div class="border"> <span>行内元素</span> </div>

• 塊狀元素

對塊狀元素設置相應的外邊距即可，外邊距左、右設置為auto。

.parent { width: 400px; height: 100px; border: 1px solid red; } .block-child { width: 100px; border: 2px solid black; margin: 10px auto; text-align: center; }

<div class="parent"> <div class="block-child">塊狀元素</div> </div>

• 多個塊狀元素①

傳統方法，在父元素設置text-align:center; 然後将需要居中的塊狀元素的display設置為inline-block

.border { width: 400px; line-height: 100px; border: 1px solid red; text-align: center; } .inline-block { display: inline-block; border: 1px solid black; }

<div class="border"> <div class="inline-block">塊狀元素1</div> <div class="inline-block">塊狀元素2</div> <div class="inline-block">塊狀元素3</div> </div>

• 多個塊狀元素②

使用flex布局實現，将父元素display設置為flex，同時設置子元素對齊。

.parent-flex { width: 400px; border: 1px solid red; display: flex; justify-content: center; }

<div class="parent-flex"> <div style="border: 1px solid black;">塊狀元素1</div> <div style="border: 1px solid black;">塊狀元素2</div> <div style="border: 1px solid black;">塊狀元素3</div> </div>

• 單行行内元素

将行内元素的 line-height 屬性與其父元素的 height 屬性設置為相同值，比如都是40px。

• 多行的行内元素

通過設置父元素display屬性為table-cell，及其他相關屬性解決。

.parent-table-cell { width: 400px; height: 100px; border: 1px solid red; display: table-cell; vertical-align: middle; }

<div class="parent-table-cell"> <span>行内元素1</span><br> <span>行内元素2</span><br> <span>行内元素3</span> </div>

• 已知高度的塊狀元素

結合元素的position及margin屬性，通過定位設置居中，父元素position設置為relative。

.item{ top: 50%; // 頂部位置位于父元素的50%處 margin-top: -50px; // margin-top 值為自身高度的一半 position: absolute; //position也可以是 }

注意：如果規定了 !DOCTYPE，則 Internet Explorer 8 （以及更高版本）支持display屬性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

喜歡就關注支持一下吧。[呲牙][呲牙]

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