css常用的四种单列居中布局方式

1.使用弹性盒 flex 实现

<div class ="first_p">
    <div class ="first_c">第一个</ div>
</ div>

<!--CSS样式-->
.first_p{
    display: flex;
    justify-content: center;/*水平轴居中*/
}
.first_c{
    height: 100px;
    width: 100px;
    background-color: red;
}

2.使用外边距实现居中（最常用）
使用margin：0 auto

<div class ="second">第二个</ div>

<!--CSS样式-- >
.second{
    margin: 0 auto;
    height: 100px;
    width: 100px;
    background-color: brown;
}

3.使用绝对定位，父元素使用相对，子元素绝对

<div class ="third_p">
     <div class ="third_c">第三个</ div>
</div>

<!--css样式-->
.third_p{
    position: relative;
}
.third_c{
    position: absolute;
    left: 50%;
    margin-left: -50px;
    height: 100px;
    width: 100px;
    background-color: gold;
} 

4.同时设置父元素和子元素的样式：父元素使用 text-align:center 实现，子元素使用 display:inline-block。

<div class="fourth_p">
    <div class="fourth_c">Fourth</div>
 </div>
    <!--  CSS样式 -- >   
.fourth_p{
    text-align: center;
}
.fourth_c{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}