CSS的常見任務是垂直居中文本或圖像；雖然CSS2不支持垂直對齊，但我們可以通過組合一些屬性來垂直居中塊。下面本篇文章就來給大家介紹一下使用CSS垂直居中文本的方法，希望對大家有所幫助。
原文地址：如何使用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的內聯塊。然後它將跨度的行高設置爲正常，因此其內容將在塊內自然流動。
推薦閱讀：