元素的水平垂直居中

一剧董、背景

在開發(fā)中經(jīng)常遇到這個(gè)問題幢尚，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字翅楼，可能是圖片或其他元素

居中是一個(gè)非澄臼＃基礎(chǔ)但又是非常重要的應(yīng)用場(chǎng)景，實(shí)現(xiàn)居中的方法存在很多毅臊，可以將這些方法分成兩個(gè)大類：

居中元素（子元素）的寬高已知
居中元素寬高未知

二理茎、實(shí)現(xiàn)方式

實(shí)現(xiàn)元素水平垂直居中的方式：

利用定位+margin:auto
利用定位+margin:負(fù)值
利用定位+transform
table布局
flex布局
grid布局

利用定位+margin:auto

先上代碼：

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

父級(jí)設(shè)置為相對(duì)定位，子級(jí)絕對(duì)定位 管嬉，并且四個(gè)定位屬性的值都設(shè)置了0皂林，那么這時(shí)候如果子級(jí)沒有設(shè)置寬高，則會(huì)被拉開到和父級(jí)一樣寬高

這里子元素設(shè)置了寬高蚯撩，所以寬高會(huì)按照我們的設(shè)置來顯示础倍，但是實(shí)際上子級(jí)的虛擬占位已經(jīng)撐滿了整個(gè)父級(jí)，這時(shí)候再給它一個(gè)margin：auto它就可以上下左右都居中了

利用定位+margin:負(fù)值

絕大多數(shù)情況下胎挎，設(shè)置父元素為相對(duì)定位沟启，子元素移動(dòng)自身50%實(shí)現(xiàn)水平垂直居中

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

整個(gè)實(shí)現(xiàn)思路如下圖所示：

圖片

初始位置為方塊1的位置
當(dāng)設(shè)置left、top為50%的時(shí)候犹菇，內(nèi)部子元素為方塊2的位置
設(shè)置margin為負(fù)數(shù)時(shí)德迹，使內(nèi)部子元素到方塊3的位置，即中間位置

這種方案不要求父元素的高度揭芍，也就是即使父元素的高度變化了胳搞，仍然可以保持在父元素的垂直居中位置，水平方向上是一樣的操作

但是該方案需要知道子元素自身的寬高沼沈，但是我們可以通過下面transform屬性進(jìn)行移動(dòng)

利用定位+transform

實(shí)現(xiàn)代碼如下：

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
  transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

translate(-50%, -50%)將會(huì)將元素位移自己寬度和高度的-50%

這種方法其實(shí)和最上面被否定掉的margin負(fù)值用法一樣流酬，可以說是margin負(fù)值的替代方案，并不需要知道自身元素的寬高

table布局

設(shè)置父元素為display:table-cell列另，子元素設(shè)置 display: inline-block芽腾。利用vertical和text-align可以讓所有的行內(nèi)塊級(jí)元素水平垂直居中

<style>
    .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

flex彈性布局

還是看看實(shí)現(xiàn)的整體代碼：

<style>
   .father {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 200px;
       height: 200px;
       background: skyblue;
   }
   .son {
       width: 100px;
       height: 100px;
       background: red;
   }
</style>
<div class="father">
   <div class="son"></div>
</div>

css3中了flex布局，可以非常簡(jiǎn)單實(shí)現(xiàn)垂直水平居中

這里可以簡(jiǎn)單看看flex布局的關(guān)鍵屬性作用：

display: flex時(shí)页衙，表示該容器內(nèi)部的元素將按照flex進(jìn)行布局
align-items: center表示這些元素將相對(duì)于本容器水平居中
justify-content: center也是同樣的道理垂直居中

grid網(wǎng)格布局

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>
<div class="father">
    <div class="son"></div>
</div>

這里看到摊滔，gird網(wǎng)格布局和flex彈性布局都簡(jiǎn)單粗暴

小結(jié)

上述方法中阴绢，不知道元素寬高大小仍能實(shí)現(xiàn)水平垂直居中的方法有：

利用定位+margin:auto
利用定位+transform
利用定位+margin:負(fù)值
flex布局
grid布局

三、總結(jié)

根據(jù)元素標(biāo)簽的性質(zhì)艰躺，可以分為：

內(nèi)聯(lián)元素居中布局
塊級(jí)元素居中布局

內(nèi)聯(lián)元素居中布局

水平居中

行內(nèi)元素可設(shè)置：text-align: center
flex布局設(shè)置父元素：display: flex; justify-content: center

垂直居中

單行文本父元素確認(rèn)高度：height === line-height
多行文本父元素確認(rèn)高度：disaply: table-cell; vertical-align: middle

塊級(jí)元素居中布局