CSS设置居中的方案总结-超全

块级元素居中 html代码部分

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

行内元素居中 html代码部分

<div class="parent">
   <span class="child">child</span>
</div>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯

水平居中

01 行内元素 text-align: center;

.parent {
   text-align: center;
}

02 块级元素 margin: auto;

（低版本浏览器还需要设置 text-align: center;）

.parent {
    text-align: center; 
}
.child {
    width: 100px;
    margin: auto; 
    border: 1px solid blue;
}

由于本文主要想记录的是垂直居中的方案，这里水平垂直的其他方案就不做过多记录了。

垂直居中

01 行内元素（单行文字垂直居中）&#