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

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

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

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

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

元素有明確的高度

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

絕對定位+負(fù)margin

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

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

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

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

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

這里有一個jsfiddle。

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

只使用絕對定位

這種方案可以說是上面方案的改良版本吧，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)，

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

這里有一個jsfiddle。

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

不知道元素的高度

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

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

絕對定位+translate

可以說這種方案是第一種場景中第一種方法的改良版本。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%為自身尺寸的一半 */
}

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

這里有一個jsfiddle。

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

模擬table布局

我們可以采用模擬table布局的方式來達(dá)到使元素絕對居中的目的。其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布局，此時，.centered元素其實(shí)就是一個單元格，設(shè)置text-aligin: center和vertical-align: middle后，單元格就絕對布局了。

這里有一個jsfiddle。

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

使用: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，同時給.centered元素設(shè)置了display: inline-block和vertical-align: middle。其實(shí)這里的.parent:before為下面的.centered元素提供了可以絕對居中的容器。

這里有一個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)絕對定位元素的水平垂直居中