实现盒子居中的5种方式

常见的几种盒子居中的方式：

1.绝对定位居中

2.负margin居中

3.margin固定宽高居中

4.flex居中

5.transform居中

6.table-cell居中

7.不确定宽高居中（绝对定位百分数）

使用例子基本结构：

<div class="box">
    <div class="chl_box">        
    </div>
</div>

1.绝对定位居中

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    position: relative;
}
.chl_box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #00FFFF;
}

2.负margin居中

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    position: relative;
}

.chl_box {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background: #00FFFF;
}

3.margin固定宽高居中

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

.chl_box {
    width: 100px;
    height: 100px;
    margin: 50px 50px;
    background: #00FFFF;
}

4.flex居中

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chl_box {
    width: 100px;
    height: 100px;
    background: #00FFFF;
}

5.transform居中

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    position: relative;
}

.chl_box {
    width: 100px;
    height: 100px;
    background: #00FFFF;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

6.table-cell居中

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

.chl_box {
    width: 100px;
    height: 100px;
    background: #00FFFF;
    margin: 0 auto;
}

7.不确定宽高居中

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
    position: relative;
}

.chl_box {
    background: #00FFFF;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
}