Html如何设置元素垂直居中

单行文本是通过设置父元素的 height 和 line-height 高度一致来完成的，其中height是指元素的高度, line-height 是指行间距。

案例：写一个<div>我是单行文本，我想垂直居中</div>，效果如图：

在<style>中加入CSS样式 <style type="text/css"> div{ height: 200px; line-height:200px; background: #3fc; } </style> 结果如图:

父元素的高度确定，table标签包裹然后设置vertical-align：middle

案例：写三个 <p> 我是多行文本1，我想垂直居中</p> <p> 我是多行文本2，我想垂直居中</p> <p> 我是多行文本3，我想垂直居中</p> 效果如图：

table（因为td 标签默认情况下就默认设置了 vertical-align 为 middle。所以不用重新再写 vertical-align:middle）标签包裹代码设置和效果图如下：