css設定元素水平垂直居中的方法

我們先說說在已知的情況下，要如何設定。

舉例說明：有2個元素，讓子元素相對于父元素水平垂直居中。

html**：

class="box">

class="innerbox">css設定元素水平垂直居中顯示div>

div>

1、利用定位及設定元素margin值為自身的一半。

css**：

.box .innerbox

說明：此方法，在我們工作中經常用到，相容性好。

2、margin：auto

css**：

.box .innerbox

說明： position: absolute; left: 0; right: 0; top: 0; bottom: 0;這是自動填充父元素的可用空間。然而給子元素設定了寬高，那麼多餘的空間，會被margin：auto平均分配。

跟已知元素寬高相比，實現未知元素寬高水平垂直居中顯示的方法較多。

1、利用css3屬性transform實現。

css**：

.box .innerbox

說明：這種方法在移動端被廣泛使用。但是，只支援高版本瀏覽器（ie9＋以上的瀏覽器支援）。

2、將父元素設定成display: table, 子元素設定為單元格 display: table-cell。這個方法跟上面介紹的方法不同，它不是讓元素居中，而是讓元素包含的內容居中。

css**：

.box .innerbox

3、css3新的布局方法，彈性布局 display: flex。這個方法，在已知或未知元素寬高的情況下，都能使元素居中顯示。

css**：

.box .innerbox

說明：此方法只支援ie9＋以上的瀏覽器。display: flex代表彈性布局，align-items: center 代表垂直方向上的居中，justify-content: center代表水平方向上的居中。這些是css3中的新屬性，感興趣的同學可以查詢相關資料學習。這裡不多介紹。