css 文字居中

单行文字水平+垂直居中

text-align: center;只能让行内元素水平居中；
line-height: 200px; 可以让垂直居中

<style>
.outer {
    width:200px;
    height:200px;
    border:1px solid green;
}
.inner {
    text-align: center;
    line-height: 200px;
}
    
</style>
<div class='outer'>
    <div class='inner'> good person
    </div>
</div>

法二：flex法

<style>
.outer {
    width:200px;
    height:200px;
    border:1px solid green;
    display:flex;
    align-items: center;
    justify-content: center;


}

</style>
<div class='outer'>
    <div class='inner'> good person 
    </div>

</div>

多行文字水平+垂直居中

法一

<style>
.outer {
    width:200px;
    height:200px;
    border:1px solid green;
    display:table;

    

}
.inner {
    display:table-cell;
    text-align: center;
    display:table-cell;
    vertical-align: middle;

}
    
</style>
<div class='outer'>
    <div class='inner'> good person good person good person good person good person good person good person good person 
    </div>

</div>

法二

<style>
.outer {
    width:200px;
    height:200px;
    border:1px solid green;
    display:flex;
    align-items: center;    

}
.inner {
    text-align: center;
}
    
</style>
<div class='outer'>
    <div class='inner'> good person good person good person good person good person good person good person good person 
    </div>

</div>

参考

css垂直居中方法盘点 - i_can_do - 博客园