CSS经典布局之垂直、水平居中(在宽，高已知的情况下)

CSS经典布局之垂直、水平居中

垂直、水平居中是前端需求中很常见的

在图中我们可以看到span’水平居中’实现了垂直、水平居中，那么怎么实现呢

HTML代码

<div class="content">
        <span class="content-span">
            水平居中
        </span>
</div>

CSS代码

.content{
   width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}
.content-span{
    display: inline-block;
    margin: 25px 0;
    border: 1px solid salmon;
    height: 50px;
    font-size: 20px;
}

效果

原理

1. 在父容器中设置text-align:center；（使子容器居中）
2. 在子容器中设置display:inline-block;margin:25px 0;
   (注意25根据自己的实际情况来算这里是25,span是内联元素所以他的margin的使用会受到限制所以必须设置display:inline-block)

这里是span子容器在父容器中的居中中方法，如果我们想要在span容器中使文字垂直、水平居中我们应该怎么做？

CSS代码

.content{
            width: 100%;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
        .content-span{
            display: inline-block;
            margin: 25px 0;
            line-height: 50px;
            height: 50px;
            width: 200px;
            border: 1px solid salmon;
            font-size: 20px;
        }

效果图

原理

我们只需要使 line-height = height 即可垂直水平
然后我们发现水平居中他好像自动完成了！！！是不是因为我们 display: inline-block; 呢??
实践出真知：
并不是，其实是我们在父容器中设置了 text-align: center;
这个是会往下传递的，是不是很神奇！！