块级元素水平居中的方法

  1. margin：0 auto 方法

<div class="center">水平居中</div>

.center{
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid red;
}

2. flex布局

<div class="center>
    <div class="flex-div">1</div>
    <div class="flex-div">2</div>
</div>

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

3.table方法

<div class="center">水平居中</div>

.center{
    width: 100px;
    height: 100px;
    display:table;
    margin:0 auto;
    border:1px solid red
}