CSS 元素垂直居中

1.對於固定寬高的元素居中

<h3>固定寬高居中</h3>

<div class="wrapper">
    <div class="content">
        <span>content</span>
    </div>
</div>

/**
    固定寬高div居中
*/
.wrapper {
    width: 200px;
    height: 200px;
    border: 1px solid #cccccc;
    margin: 10px auto;
    position: relative;
    box-shadow: -5px 0 20px #999, 5px 0 20px #999, 0 -5px 5px #999, 0 5px 5px #999;
}


.content {
    width: 100px;
    height: 50px;
    border: 1px solid #cccccc;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -25px;
    text-align: center;
}
.content span {
    display: block;
    line-height: 50px;
}

如圖帶陰影的外層容器是一個div,內層有一個小的div,小div內部有一個span元素。對於這種父容器與子容器的寬高都是確定的佈局，可以將父容器設置爲相對定位，子容器設爲絕對定位。然後將子容器分別向下向左浮動父容器的50%。但這時會使子容器的上邊框和左邊框分別居於父容器的垂直方向的中間和水平方向的中間，所以我們需要將子容器分別再向左偏移子容器寬度的一半，向上偏移子容器高度的一半。這樣子容器就剛好位於父容器的中間了。

上圖中示例中我們看到內容爲content的span元素也位於其父元素的中間，對於這種單行行內元素有一個小技巧可以使其在父元素的垂直方向上居中，即設置其行高等於父級容器。這種垂直居中只對單行行內元素有效，一般我們可以用這種方式讓一個連接式按鈕的文本垂直居中，這種方式就很方便。

2.父容器和子元素寬高不定

一些情況下，容器和父元素的寬高均是不確定的，這時採用第一種方法就無法實現居中效果了。可以採用下面的方式實現居中效果。爲父容器添加僞選擇器:before,並將子元素的display屬性設爲inline-block。來看具體的樣式和佈局文件。

/*父容器*/
.second-wrapper {
    width: 300px;
    height: 300px;
    margin: 10px auto;
    border: 1px solid #cccccc;
    position: relative;
    text-align: center;
    box-shadow: 5px 5px 5px #999;
}
/*爲父容器添加的僞選擇器*/
.second-wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

/*子元素*/
.second-content {
    padding: 50px;
    border: 1px solid #cccccc;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

<h3>寬高不定，但元素必須是inline-block</h3>

<div class="second-wrapper">
    <div class="second-content">
        <p>
            內部元素
        </p>
    </div>
</div>

實現效果

這裏可以將父元素的寬高設置爲任何值，子元素的寬高也可以爲任何值，都可以將其居中顯示。

3.寬高 利用display爲table的屬性使元素居中

/*利用display的table屬性，將父容器dispaly屬性設置爲table,子元素的display屬性設置爲table-cell
然後使用vertical-align，text-align分別是元素垂直水平居中*/
.third-wrapper {
    width: 300px;
    height: 300px;
    margin: 10px auto;
    border: 1px solid #cccccc;
    position: relative;
    text-align: center;
    box-shadow: 5px 5px 5px #999;
    display: table;
}

.third-content {
    display: table-cell;
    vertical-align: middle;
}

<h3>寬高不定，利用table屬性</h3>
<div class="third-wrapper">
    <div class="third-content">
        hello world
    </div>
</div>