Html如何设置元素垂直居中
网页中元素如何设为垂直居中，此时父元素垂直居中分为两种情况：1：父元素高度确定的单行文本；2：父元素高度确定的多行文本。具体设置居中需要看下文了，哈哈
1.单行文本垂直居中
- 01
单行文本是通过设置父元素的 height 和 line-height 高度一致来完成的，其中height是指元素的高度, line-height 是指行间距。
- 02
案例：写一个<div>我是单行文本，我想垂直居中</div>，效果如图：
- 03
在<style>中加入CSS样式 <style type="text/css"> div{ height: 200px; line-height:200px; background: #3fc; } </style> 结果如图:
2.多行文本垂直居中
- 01
父元素的高度确定，table标签包裹然后设置vertical-align：middle
- 02
案例：写三个 <p> 我是多行文本1，我想垂直居中</p> <p> 我是多行文本2，我想垂直居中</p> <p> 我是多行文本3，我想垂直居中</p> 效果如图：
- 03
table（因为td 标签默认情况下就默认设置了 vertical-align 为 middle。所以不用重新再写 vertical-align:middle）标签包裹代码设置和效果图如下：
赞 (0)