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

水平居中

text-align : center

垂直居中

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

2捏题、塊元素水平居中

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

３修械、垂直居中

1把鉴、

vertical-align : middle; 需要注意的是，它只對于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() 和定位實現(xiàn)

1之碗、使用定位實現(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屬性實現(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、使用彈性布局實現(xiàn)

html代碼

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

CSS代碼

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

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

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

4褪那、使用transform 變換和定位實現(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移動的是自身寬高的 百分比*/
    transform: translate(-50%,-50%);
}