CSS如何使元素水平垂直定位

作為一名前端工程師，在進(jìn)行web頁面開發(fā)的時(shí)候，可能會(huì)遇到這樣一種問題：如何使一個(gè)元素相對(duì)父容器水平垂直居中，也就是所謂的絕對(duì)居中呢？這篇文章將會(huì)針對(duì)這個(gè)問題介紹幾種常用的方法。

談到這個(gè)問題，相信有點(diǎn)經(jīng)驗(yàn)的同學(xué)們可能心里已經(jīng)有了答案了。

不過，這篇文章將會(huì)從下面兩種不同的應(yīng)用場(chǎng)景分別闡述如何使用CSS讓一個(gè)元素絕對(duì)居中，

• 元素有明確的高度
• 不知道元素的高度

元素有明確的高度

這種場(chǎng)景中，我們已經(jīng)知道需要絕對(duì)居中的元素的高度，或者說元素的高度是確定的。其實(shí)這種場(chǎng)景中要使一個(gè)元素絕對(duì)居中是相對(duì)容易做到的，并且有好幾種實(shí)現(xiàn)方法。

絕對(duì)定位+負(fù)margin

這是一種兼容性不錯(cuò)的方案，其代碼如下，

<div class="parent">
    <div class="centered"></div>
</div>

.centered元素就是我們需要絕對(duì)居中的元素，它的css代碼如下，

.centered {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;    /* 高度的一半 */
    margin-left: -50px;    /* 寬度的一半 */
}

這里的技巧很容易理解，將元素絕對(duì)定位后，left和top的距離都設(shè)為50%，然后通過設(shè)置margin-top和margin-left為負(fù)值將元素移動(dòng)到適當(dāng)?shù)奈恢?，而且這里margin-top和margin-left的負(fù)值大小為元素大小為一半。

這里有一個(gè)jsfiddle。

顯而易見，如果這里的.centered元素的寬高是不確定，那我們就沒辦法通過設(shè)置margin-top和margin-left來移動(dòng)元素了。

只使用絕對(duì)定位

這種方案可以說是上面方案的改良版本吧，html是一樣的，這里就不復(fù)述了。它的css代碼如下，

.centered {
    height: 100px;
    width: 200px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

這種方案中有兩點(diǎn)關(guān)鍵點(diǎn)，

• 元素絕對(duì)定位，且上右下左的定位都是0
• 使用margin:auto

這里有一個(gè)jsfiddle。

注意：這種方案中，css代碼中的height和width其實(shí)可以不設(shè)置，但是此時(shí).centered元素必須是類似<img>這種自身帶有大小的元素。

不知道元素的高度

這種場(chǎng)景中，需要絕對(duì)居中的元素的寬高我們是不知道的，或者壓根就是不確定的。此時(shí)我們就不能使用第一種場(chǎng)景中的兩種方法了。

這種場(chǎng)景下，我們也有好幾種實(shí)現(xiàn)方式。

絕對(duì)定位+translate

可以說這種方案是第一種場(chǎng)景中第一種方法的改良版本。html代碼就不貼了，其css代碼如下，

.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */
    -webkit-transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */
    -moz-transform: translate(-50%, -50%);    /* 50%為自身尺寸的一半 */
}

同樣，這種方法的技巧也是比較容易理解的。我們?cè)诮^對(duì)定位且top: 50%和left: 50%之后，使用css3中的tranlaste讓元素移動(dòng)自身寬高的50%，這樣元素就絕對(duì)居中了，這里我們是不需要知道元素的寬高的。

這里有一個(gè)jsfiddle。

由于一些客觀的原因，這種看起來很美好的方法可能會(huì)遇到一些兼容性的問題，所以在實(shí)際使用中要視情況而定。

模擬table布局

我們可以采用模擬table布局的方式來達(dá)到使元素絕對(duì)居中的目的。其html代碼如下，

<div class="parent">
   <div class="centered">
       Unknown stuff to be centered.
   </div>
</div>

相應(yīng)的css代碼如下，

.parent {
    display: table;
    width: 100%;
    height: 200px;
}
.centered {
    background-color: blue;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

可以看出，我們讓父容器采用display: table布局，子元素使用display: table-cell布局，此時(shí)，.centered元素其實(shí)就是一個(gè)單元格，設(shè)置text-aligin: center和vertical-align: middle后，單元格就絕對(duì)布局了。

這里有一個(gè)jsfiddle。

這種在很多情況下可能會(huì)不太適用，因?yàn)閠able布局其實(shí)是比較惡心的，它往往會(huì)一些其他的問題。大家視情況決定吧。

使用:before

除了上面介紹的兩種方法以外，我們還可以使用一種技巧性比較強(qiáng)的方法，其html代碼和上面的是一樣的，這里就不貼了。

其css代碼如下，

/* This parent can be any width and height */
.parent {
    text-align: center;
}
.parent:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
 }
/* The element to be centered, can also be of any width and height */
.centered {
    display: inline-block;
    vertical-align: middle;
 }

我們著重看一下這里.parent:before元素的樣式，這里的:before偽元素起了很重要的作用，它擁有和.parent元素一樣的高度，而且設(shè)置了.vertical-align: middle，同時(shí)給.centered元素設(shè)置了display: inline-block和vertical-align: middle。其實(shí)這里的.parent:before為下面的.centered元素提供了可以絕對(duì)居中的容器。

這里有一個(gè)jsfiddle。

參考列表

• Absolute Horizontal And Vertical Centering In CSS
• How to Center Anything With CSS
• 如何只用CSS做到完全居中
• Centering in the Unknown
• 小tip: margin:auto實(shí)現(xiàn)絕對(duì)定位元素的水平垂直居中