不定宽高的div中文字垂直居中（经常会问）

赵~

于 2018-09-21 20:25:20 发布

阅读量599

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/aas15/article/details/82807043

本文详细解析了如何使用CSS的绝对定位结合transform属性实现元素的精确居中，包括理解top:50%和left:50%的原理，以及translate(-50%,-50%)的具体作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Examples

div{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

/*
 * 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
 * translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置
 * 往左平移自己宽度的一半的距离，往右平移自己宽度的一半的距离
 */

}

居中文字

不定宽高的div中 文字垂直居中（经常会问）