一、使用 line-height 实现垂直居中
使用 line-height 属性设置行高等于元素高度即可实现单行文本的垂直居中。
.container { height: 100px; line-height: 100px; }
如果需要实现多行文本的垂直居中,可以使用伪元素和 transform。
.container { position: relative; } .container::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .text { display: inline-block; vertical-align: middle; transform: translateY(-50%); }
二、使用 flexbox 实现垂直居中
使用 flexbox 可以轻松实现父容器内元素的垂直居中。
.container { display: flex; align-items: center; /* 垂直居中 */ }
如果需要水平和垂直居中,可以使用 justify-content 和 align-items。
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }
三、使用 table-cell 实现垂直居中
将元素设置为 display: table-cell 和 vertical-align: middle 即可实现垂直居中。
.container { display: table-cell; vertical-align: middle; height: 100px; /* 需要设置高度 */ }
四、使用 grid 实现垂直居中
使用 grid 可以轻松实现父容器内元素的垂直居中。
.container { display: grid; place-items: center; /* 水平居中和垂直居中 */ }
五、使用 position 和 transform 实现垂直居中
将元素设置为 position: absolute 和 top: 50%,再使用 transform: translateY(-50%) 即可实现垂直居中。
.container { position: relative; } .text { position: absolute; top: 50%; transform: translateY(-50%); }
综上所述,CSS 实现文本的垂直居中有多种方法可选,根据不同需求选择不同的实现方法即可。