css中的多種垂直水平居中

時間 2019-11-16

標籤 css 多種垂直水平居中欄目 CSS 简体版

原文原文鏈接

簡介

在面試的時候css面試題裏面基本上都會問一個元素垂直水平居中，其實這個有多種方式實現，同時元素能夠是固定寬高、不固定寬高的。css

固定寬高html

position absolute + 負margin
position absolute + margin auto
position absolute + calc

不固定寬高css3

position absolute + transform
css-table
flex
grid

下面就直接上代碼，公用的html代碼和css代碼就寫在這裏後面都會在這個基礎上增長代碼。 html公用代碼：面試

<div class="container">
        <div class="box-center">
            box-center
        </div>
    </div>
複製代碼

css公用代碼：chrome

.container {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    .box-center {
        width: 100px;
        height: 100px;
        background-color: red;
        color: #fff;
    }
複製代碼

有兩個元素它們是父子級的關係，要達到的效果是子元素要在父元素中垂直水平居中。佈局

固定寬高

固定寬高的意思就是要居中的這個元素它的寬高都是固定的值，下面一個一個用代碼實現。flex

position absolute + 負margin

css代碼以下：ui

/* 此處引用上面的公共代碼 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
複製代碼

利用絕對定位讓子元素基於父元素的左上角偏移50%，可是這樣不是真正的居中由於它多移動了自己元素的寬度的一半和高度的一半，這個時候咱們能夠經過負margin來修正這個問題，因此就有了-50px這兩個屬性。spa

position absolute + margin auto

css代碼以下：firefox

/* 此處引用上面的公共代碼 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
複製代碼

這種方式經過設置各個方向的距離都是0，此時再講margin設爲auto，就能夠在各個方向上居中了。

position absolute + calc

css代碼以下：

/* 此處引用上面的公共代碼 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
    }
複製代碼

經過calc計算屬性減去元素自己高度和寬度的一半。

不固定寬高

固定寬高的意思就是要居中的這個元素它的寬高都是不固定的值，不固定寬高的方法是能夠覆蓋上面固定寬高的方法，下面一個一個用代碼實現。

position absolute + transform

css代碼以下：

/* 此處引用上面的公共代碼 */
    .container {
        position: relative;
    }
    .box-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
複製代碼

修復絕對定位的問題，還能夠使用css3新增的transform，transform的translate屬性也能夠設置百分比，其是相對於自身的寬和高，因此能夠講translate設置爲-50%，就能夠作到居中了。

css-table

css代碼以下：

/* 此處引用上面的公共代碼 */
    .container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box-center {
        display: inline-block;
    }
複製代碼

經過display: table-cell把div元素變爲table元素的實現效果，經過這個特性也能夠實現垂直水平居中。

flex

css代碼以下：

/* 此處引用上面的公共代碼 */
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-center {
        text-align: center;
    }
複製代碼

經過flex的兩個屬性實現垂直水平居中。

grid

css代碼以下：

/* 此處引用上面的公共代碼 */
    .container {
        display: grid;
        justify-items: center;
        align-items: center;
    }
    .box-center {
        text-align: center;
    }
複製代碼

經過grid佈局實現居中，若是grid不太瞭解能夠看grid佈局

其餘

有兩種比較特殊的垂直水平居中的方式，應用場景比較少或者代價比較大，因此在這幾記錄一下以下：

行內元素居中
table佈局

行內元素居中

css代碼以下：

/* 此處引用上面的公共代碼 */
    .container {
        text-align: center;
        line-height: 300px;
        font-size: 0; // 兼容代碼
    }
    .box-center {
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
        font-size: 14px;
    }
複製代碼

把container設置爲行內元素，經過text-align就能夠作到水平居中，經過vertical-align也能夠在垂直方向作到居中。

table佈局

改變html結構以下：

<table>
        <tbody>
            <tr>
                <td class="container">
                    <div class="box-center">box-center</div>
                </td>
            </tr>
        </tbody>
    </table>
複製代碼

css代碼以下：

/* 此處引用上面的公共代碼 */
    .container {
        text-align: center;
    }
    .box-center {
        display: inline-block;
    }
複製代碼

利用table屬性實現。

總結

上面實現總結以下面表格所示：

方法	居中元素定寬高固定	PC兼容性	移動端兼容性
position absolute + 負margin	固定寬高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
position absolute + margin auto	固定寬高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
position absolute + calc	固定寬高	ie9+, chrome19+, firefox4+	安卓4.4+, iOS6+
position absolute + transform	不固定寬高	ie9+, chrome4+, firefox3.5+	安卓3+, iOS6+
css-table	不固定寬高	ie8+, chrome4+, firefox2+	安卓2.3+, iOS6+
flex	不固定寬高	ie10+, chrome4+, firefox2+	安卓2.3+, iOS6+
grid	不固定寬高	ie10+, chrome57+, firefox52+	安卓6+, iOS10.3+
table佈局	不固定寬高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+
行內元素居中	不固定寬高	ie6+, chrome4+, firefox2+	安卓2.3+, iOS6+