文字在div中垂直剧中
在 CSS 中,有几种方法可以使文字在 div
中垂直居中:
Flexbox:你可以使用 Flexbox 的
align-items
属性来轻松实现这一点:div {
display: flex;
align-items: center; /* 垂直居中 */
height: 100px; /* 或者其他你想要的高度 */
}
Line Height:如果你的
div
只包含一行文本,你也可以通过设置line-height
等于div
的高度来达到垂直居中的效果:div {
line-height: 100px; /* 和 div 的高度相同 */
}
CSS Grid:你也可以使用 CSS Grid 的
align-items
属性来让文本垂直居中:div {
display: grid;
align-items: center;
height: 100px; /* 或者其他你想要的高度 */
}
Table Cell Display:旧的方法是将
div
显示为表格单元格,并使用vertical-align
属性:div {
display: table-cell;
vertical-align: middle;
height: 100px; /* 或者其他你想要的高度 */
}
注意:在使用以上方法时,确保你已经为 div
设置了具体的高度(除非你的 div
已经有了自然高度)。