使用 CSS vertical-align 屬性將文本垂直居中對齊

要使文本垂直居中對齊，您可以使用 CSS 屬性vertical-alignwithcenter作為其值。您還需要使用display:table-cellCSS 屬性使文本垂直居中。

向 div 元素添加一些寬度和高度，并將文本也水平居中對齊。要使文本水平居中，您必須使用text-align:center.

<style>
.valigndiv{
	width:200px;
  	height:200px;
  	display:table-cell;
  	text-align:center;
  	background:#ccc;
  	border:1px solid #000;
  	vertical-align:middle;
}
</style>
<div class="valigndiv">This is the Vertically Aligned content.</div>

輸出

上面的示例包含帶有一些背景顏色的 div 元素。div 元素中的文本位于所需位置。