經常使用的元素居中結構（附圖解）

1. 文本在容器中水平垂直居中

tac = text-align: center; 水平居中

vam = vertical-align: middle;

1.1 table(table + tac + vam)

父容器：display: table;
子容器：display: table-cell;
       text-align: center;
       vertical-align: middle;

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
</div>

.container {
    display: table;
}
.box {
    display: table-cell;
    width: 150px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #00f
}

1.2. height & line-height + tac

容器(指放置文本的容器)：設置height
                  將line-height設置與height同高
                   text-align: center;

html結構與1.相同，不過不須要父元素container

.box {
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px solid #00f
}

2. 子元素在父元素中水平垂直居中

posa = position: absolute;

2.1 定位 + transform

父容器帶有 relative、absolute、fixed的其中一種定位
子容器：position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

<div class="container">
    <div class="box box1">盒子</div>
</div>

.container {
    margin-top: 200px;
    margin-left: 200px;
    width: 450px;
    height: 450px;
    border: 2px solid #be572a;
    
    position: relative;
}
.box {
    width: 100px;
    height: 100px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    border: 1px solid #00f
}

子容器設置絕對定位後，距離父容器的寬高比是根據父容器的寬高來決定的

因此咱們須要設置top: 50%; left: 50%;

這時，咱們看到，只有盒子的左上角是水平垂直居中的

而後，咱們還須要「移回去」；子容器設置的translate是根據自身寬高來移動的，因此咱們在移回自身寬高的50%便可獲得盒子的水平垂直居中

補充：既然translate移動的是自身的寬高，因此若是父容器已定寬高，則子容器能夠設置margin-top和margin-left也能夠達到水平垂直居中的效果

2.2 display:flex

爲了與上例區分擴大了子元素的寬高

父元素： display: flex; align-items: center; justify-content: center;

父元素設置flex後設置justify-content和align-items控制子元素在主軸和交叉軸上的對齊方式

<div class="container">
    <div class="box box1">我是flex</div>
</div>

.container {
    margin-top: 200px;
    margin-left: 200px;
    width: 450px;
    height: 450px;
    border: 2px solid #be572a;
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.box {
    width: 150px;
    height: 150px;
    border: 1px solid #00f
}

3. 水平居中

1.1（當子元素設置了絕對定位時的）margin 0 auto

父容器帶有 relative、absolute、fixed的其中一種定位
子容器：position:absolute; left: 0; right: 0; margin: 0 auto;

<div class="container">
    <div class="box box1">left right拉扯了寬度，margin 0 auto控制水平居中</div>
</div>

.container {
    margin-top: 200px;
    margin-left: 200px;
    width: 450px;
    height: 200px;
    border: 2px solid #be572a;
    position: relative;
}
.box {
    width: 200px;
    height: 150px;

    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;

    border: 1px solid #00f
}

其實這裏有人會疑惑，父容器已經設置了寬高，那直接margin 0 auto不就行了嗎？

那是在子容器沒有設置絕對定位的狀況下能夠直接margin 0 auto

若是咱們由於須要，在子容器設置了絕對定位，那即便父容器設置了寬高，子容器margin 0 auto也不會有水平居中效果

/*left: 0; right: 0;*/