CSS文字垂直居中

来自京东商城https://www.jd.com/的优秀用户过去的童话520，于2018.03.08 15:00:53在经验百科知识平台总结分享了一篇关于“CSS文字垂直居中罗马许愿池”的百科，非常感谢Array的辛苦付出，他总结的解决技巧方法及常用办法如下：

操作方法

• 01

  先写上html代码，如图，内容很简单，就是一个div里有一段文本。

  
• 02

  再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。

  
• 03

  如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。

  
• 04

  要让文本水平居中，我们可以添加样式：text-align: center;
  要让文本垂直居中，我们可以添加样式： vertical-align: middle;和display: table-cell;

  
• 05

  添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。