单行文字水平+垂直居中
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>
