1、使行內(nèi)元素

水平居中

text-align : center

垂直居中

line-height : 容器的高度，如果有 n 行文本，則使用 height / n

2、塊元素水平居中

margin : 0 auto; 注意它只對(duì)塊元素有效，行內(nèi)塊雖有寬高，但也需要轉(zhuǎn)為塊元素才能生效

３、垂直居中

1、

vertical-align : middle; 需要注意的是，它只對(duì)于inline 和 inline-block 以及設(shè)置了table-cell （例如td）的元素。

2、

、父元素不設(shè)置高度，利用padding-top == padding-bottom

4、水平和垂直都居中 (即行內(nèi)塊元素水平垂直居中的方式)

• 1、使用定位
• 2、使用 display : table
• 3、使用彈性布局： display : flex
• 4、使用transform : translate() 和定位實(shí)現(xiàn)

1、使用定位實(shí)現(xiàn)水平垂直居中

html代碼

<div class="outer">
    <div class="inner"></div>
</div>

CSS代碼

.outer{
        width: 600px;
        height: 600px;
        background: #f00;
        margin: 0 auto;
        position: relative;
    }
    .inner{
        width: 200px;
        height: 200px;
        background: #00f;
        position: absolute;
        left: 50%;
        margin-top: -100px;    /*自身高度的一半*/
        margin-left: -100px;   /* 自身寬度的一半*/
        top: 50%;
    }

2、使用 display : table屬性實(shí)現(xiàn)水平垂直居中

html代碼

<div class="outer">
    <div class="inner">
    </div>
</div>

CSS代碼

.outer{
    width: 600px;
    height: 600px;
    background: #f00;
    /*將父元素設(shè)置 display : table-cell; 并搭配 vertical-align:middle;*/
    display: table-cell;
    vertical-align: middle;
}
.inner{
    width: 200px;
    height: 200px;
    background: #00f;   
    margin: 0 auto;
}

3、使用彈性布局實(shí)現(xiàn)

html代碼

<div class="outer">
    <div class="inner">
    </div>
</div>

CSS代碼

.outer{
    width: 600px;
    height: 600px;
    background: #f00;
    display: flex;

    /*設(shè)置主軸方向（默認(rèn)為水平）居中*/
    justify-content:center;

    /*設(shè)置交叉軸方向（與主軸垂直）居中*/
    align-items: center;
}
.inner{
    width: 200px;
    height: 200px;
    background: #00f;   
    
}

4、使用transform 變換和定位實(shí)現(xiàn)居中

html代碼

<div class="outer">
    <div class="inner">
    </div>
</div>

CSS代碼

.outer{
    width: 600px;
    height: 600px;
    background: #f00;
    position: relative;
}
.inner{
    width: 200px;
    height: 200px;
    background: #00f;   
    position: absolute;
    left: 50%;
    top:50%;

    /*這里需要注意的是，translate移動(dòng)的是自身寬高的 百分比*/
    transform: translate(-50%,-50%);
}