前端CSS基础——CSS居中方法总结

水平居中

水平居中分为三种，一种是行盒（行块盒）模型居中，一种是常规流块盒模型居中，一种是定位元素的水平居中

行盒（行块盒）水平居中

在父级元素添加属性 text-align: center（行块盒同理）

	div{
   
            height: 100px;
            background-color: aqua;
            text-align: center;//
        }
    <div>
        <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem, distinctio?</span>
    </div>

实现效果

常规流块盒水平居中

给定宽，设定margin左右两边的值为auto

		div{
   
            height: 100px;
            background-color: aqua;
        }
        span{
   
            display: block;