我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container"> hi,vxzsk.com! </div>
css代码：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>练习
新建示例页面demo.html，示例代码如下
我来试试：补充示例页面中的代码使 h2 中的文本垂直方向居中。
示例代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap h2{
margin:0;
height:100px;
background:#ccc;
}
</style>
</head>
<body>
<!--下面是代码任务部分-->
<div class="wrap">
<h2>hi,vxzsk.com!</h2>
</div>
</body>
</html>
此文章本站原创，地址 https://www.vxzsk.com/1456.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程