水平居中

1、让文字/行内元素居中

<p class="center1">水平居中</p>
.center1 {
    text-align: center;
}

2、让单个块级元素居中

<div class="parent">
    <div class="txt"></div>
</div>

（1）margin: 0 auto;

.txt {
    width: 100px;
    height: 100px;
    background: red;
    margin: 0 auto;
 }

（2）定位

.txt {
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
    left: 50%;
    margin-left: -50px;
}

.parent {
    position: relative;
}

3、让多个块级元素居中

<div class="parent2">
    <div class="txt2">1</div>
    <div class="txt2">2</div>
    <div class="txt2">3</div>
    <div class="txt2">4</div>
</div>

（1）把块级元素设置为行内块级元素，然后text-align: center;

.parent2 {
    text-align: center;
}

.txt2 {
    display: inline-block;
}

（2）flex

.parent2 {
    display: flex;
    justify-content: center;
}