CSS 中,實現文本垂直方向居中有多種方法。本文將介紹三種比較常用的方式:
第一種方法是使用行高(line-height)。這種方法適用于單行文本的垂直居中。我們可以將行高設置為與容器高度相等的值,這樣文本就會在容器中垂直居中。下面是示例代碼:
.container { height: 100px; line-height: 100px; text-align: center; }
第二種方法是使用 flex 布局。這種方法適用于多行文本的垂直居中。我們可以將容器設置為 flex 布局,并使用 align-items 屬性將文本垂直居中。下面是示例代碼:
.container { display: flex; align-items: center; justify-content: center; height: 200px; }
第三種方法是使用 transform 屬性。這種方法適用于多行文本的垂直居中。我們可以將文本放在容器的中心,然后使用 transform 屬性將文本上移一半容器高度。下面是示例代碼:
.container { display: flex; justify-content: center; align-items: center; height: 200px; } .text { position: relative; top: 50%; transform: translateY(-50%); }
以上就是三種 CSS 實現文本垂直方向居中的方法。根據需要選擇不同的方式即可。