css 水平垂直居中 常見方法

已知寬高(指的是content的寬高)：

html：

<div class="box">
    <div class="content">
        水平垂直居中
    </div>
</div>

css:

1、利用position和margin(往上和左移動自身的一半)(外容器需要給定高度)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        position: relative;
    }
    .content{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
    }

2、利用margin:auto和position(外容器需要給定高度)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        position: relative;
    }
    .content{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 0;
        right: 0;
        left:0;
        bottom: 0;
        margin: auto;
    }

未知寬高(指的是content的寬高)：

1、利用position和transform(外容器需要給定高度)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        position: relative;
    }
    .content{
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

2、利用flex佈局(外容器不需要給定高度)（content如果不設置寬度的話，寬度爲百分百）

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }
    .content{
        width: 100px;
        background: red;
    }

3、利用inline-block和vertical-align實現

首先來看一個例子：一個box中有兩個content，把兩個content設置成行內塊並且垂直方向居中對齊，把第一個content的高設爲100%，這樣第二個content可以實現垂直居中，在box中設置text-align水平居中對齊，因爲content是行內塊所以會水平居中

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        text-align: center;
    }
    .content1{
        background: green;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    .content2{
        background: red;
        display: inline-block;
        vertical-align: middle;
    }  
  
    <div class="box">
        <div class="content1">
            輔助作用
        </div>
        <div class="content2">
            水平垂直居中
        </div>
    </div>

結果如圖所示

根據以上，如果我們把content1的內容設置爲空，因爲inline-block元素會有空白間距，我們用往左移動0.25em解決，這樣就可以實現content2爲水平垂直居中了

我們可以利用.box:before來寫content1這個空元素

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        text-align: center;
    }
    .box:before{
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        margin-right: -0.25em;
    }
    .content2{
        background: red;
        display: inline-block;
        vertical-align: middle;
    }

    <div class="box">
        <div class="content2">
            水平垂直居中
        </div>
    </div>

以上就實現了水平垂直居中，但是content2是一個行內塊元素，如果內容過長等於100%的時候會換行，所以建議寬度小於100%

4、利用table-cell佈局(不建議用)

    .box{
        width: 500px;
        height: 500px;
        border: 1px solid #ddd;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .content{
        display: inline-block;
        background: red;
    }

https://www.jianshu.com/p/907f99004c3e[未完待續。。。]