常用到的水平垂直居中样式布局

1. 水平对齐+行高

【思路一】text-align + line-height实现单行文本水平垂直居中

<div class="test1">
            <i class="iconfont icon icon-zengjia"></i>
            <span>测试文字</span>
        </div>
<style lang="scss">
.test1 {
        text-align: center;
        line-height: 50px;
        background-color: lightblue;
        width: 200px;
        font-size: 14px;
        .icon {
            font-size: 14px;
        }
    }
</style>

2. 水平+垂直对齐
   【思路二】text-align + vertical-align
   【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素(不兼容IE7/8)

<div class="case-box f11">
            <div class="parent">
                <i class="iconfont icon icon-zengjia"></i>
                <div class="child">测试文字</div>
            </div>
        </div>
.f11 {
        .parent {
            display: table-cell;
            text-align: center;//水平方向居中
            vertical-align: middle;//垂直方向居中
            background-color: gray;
            width: 200px;
            height: 100px;
            .child {
                display: inline-block;//本身是块元素会继承父容器的宽,设置为inline-block后宽是由内容撑开
                background-color: lightblue;
            }
        }
    }

【2】若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle

<div class="case-box f12">
            <div class="parent">
                <img class="child" src="./imgs/58.png" alt="test" />
                <img class="child" src="./imgs/banner1.jpg" alt="test" />
            </div>
        </div>
.f12 .parent {
        line-height: 200px;
        text-align: center;
        font-size: 0;
        background-color: gray;
        width: 200px;
    }
    .f12 .child {
        vertical-align: middle;
        width: 50px;
    }

3. margin + vertical-align
   要想在父元素中设置vertical-align，须设置为table-cell元素；要想让margin:0 auto实现水平居中的块元素内容撑开宽度，须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的，就像一个单元格里可以嵌套一个表格

<div class="case-box f13">
            <div class="parent">
                <div class="child">
                    <i class="iconfont icon icon-zengjia"></i>
                    <span>测试文字</span>
                </div>
            </div>
        </div>
.f13 .parent {
        display: table-cell;
        vertical-align: middle;
        background-color: lightgray;
        width: 200px;
        height: 100px;
    }
    .f13 .child {
        display: table;
        margin: 0 auto;
        background-color: lightblue;
        i{
            font-size: 14px;
        }
    }

4. 绝对定位
   利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果

<div class="case-box f14">
            <div class="parent">
                <div class="child">测试文字</div>
            </div>
        </div>
.f14 {
        .parent {
            position: relative;
            background-color: lightgray;
            width: 200px;
            height: 100px;
            margin: 0 auto;
        }
        .child {
            position: absolute; //相对于父级绝对定位,父级必须是relative定位
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: lightblue;
        }
    }

利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto,让子容器相对于父容器居中

<div class="case-box f14">
            <div class="parent">
                <div class="child">测试文字</div>
            </div>
        </div>
.f14 {
        .parent {
            position: relative;
            background-color: lightgray;
            width: 200px;
            height: 300px;
            
        }
        .child {
            position: absolute; //相对于父级绝对定位,父级必须是relative定位
            top:0;
            bottom: 0;
            left:0;
            right: 0;
            margin:auto;
            height: 50px;
            width: 100px;
            background-color: lightblue;
            text-align: center;
        }
    }

5. 在伸缩项目上使用margin:auto

<div class="case-box f14">
            <div class="parent">
                <div class="child">测试文字</div>
                <div class="child">测试文字</div>
            </div>
        </div>
.f14 {
        .parent {
            display: flex;
            background-color: lightgray;
            width: 200px;
            height: 300px;
        }
        .child {
            background-color: lightblue;
            margin: auto;
            // width: 50%;
            flex:1;
            height: 50px;
        }
    }

在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

<div class="case-box f14">
            <div class="parent">
                <div class="child">测试文字</div>
                <div class="child">测试文字</div>
            </div>
        </div>
.f14 {
        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: lightgray;
            width: 200px;
            height: 300px;
        }
        .child {
            background-color: lightblue;
        }
    }