css设置文字在div中水平垂直居中的方法

今天给大家分享一个使用CSS实现div内文字水平垂直居中和div内子元素文字居中的方法。div内设置文字水平垂直居中需要设置height和line-height的高度一致，并且设置text-align为center。div内子元素文字居中同样需要设置height和line-height的高度一致，并且设置display为inline-block，vertical-align设置为middle。

实现效果

CSS样式

        .demo{
            width: 500px;
            height: 200px;
            border:1px solid red;
            line-height: 200px;/*设置文字内容垂直居中，与height的高度相同*/
            text-align: center;/*设置文字内容居中在中间*/
            margin: auto auto 20px;
        }
        .box{
            background: yellow;
            width: 200px;
            height: 70px;
            display: inline-block; /*一定要将div设置为inline-block*/
            vertical-align: middle;/*设置该元素在父元素中的位置*/
            line-height: 70px;
            border: 1px solid green;
        }

HTML结构

<div class="demo">
    div中居中的文字
</div>

<div class="demo">
    <div class="box">我是子元素的文字</div>
</div>