CSS的常见任务是垂直居中文本或图像；虽然CSS2不支持垂直对齐，但我们可以通过组合一些属性来垂直居中块。下面本篇文章就来给大家介绍一下使用CSS垂直居中文本的方法，希望对大家有所帮助。
方法一：指定将外部块格式化为表格单元格
表格单元格的内容可以垂直居中，将外部块格式化为表格单元格就可垂直居中文本。
示例：将段落置于具有特定给定高度的块内
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container {
width: 400px;
height: 200px;
border: 1px solid red;
min-height: 10em;
display: table-cell;
vertical-align: middle
}
</style>
</head>
<body>
<div class="container">
这是一段测试文本！
</div>
</body>
</html>
效果图：
方法二：使用line-height属性
这是垂直对齐文本的另一种方法。此方法适用于单行和多行文本，但仍需要固定高度的容器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div class="container">
<span>
这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！
这是一段测试文本！
</span>
</div>
</body>
</html>
效果图：
CSS只要调整div的大小，通过将div的line-height属性设置为其高度来对齐span，并使span具有vertical-align：middle的内联块。然后它将跨度的行高设置为正常，因此其内容将在块内自然流动。
网友评论