先写上html代码，如图，内容很简单，就是一个div里有一段文本。
02再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。
03如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。
04要让文本水平居中，我们可以添加样式：text-align: center
要让文本垂直居中，我们可以添加样式： vertical-align: middle和display: table-cell
05添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。
使文字在div中水平和垂直居中的的css样式为
text-align:center /*水平居中*/line-height: 20px /*行距设为与div高度一致*/
示例如下：
HTML元素
<div>水平垂直居中</div>css样式
div{width:200pxheight:200px /*设置div的大小*/
border:1px solid green /*边框*/
text-align: center /*文字水平居中对齐*/
line-height: 200px /*设置文字行距等于div的高度*/
overflow:hidden
}
显示效果
采用css的flex布局实现最为简单有效。display: flex
<div class="box">
<div class="item">我要居中</div>
</div>
.box {
display: flex
width: 200px
height: 200px
justify-content: center // 水平居中
align-items: center // 垂直居中
}
