我有这个简单的代码来垂直和水平居中页面上的文本元素:
body {
max-width: 1200px;
margin: 0 auto;
}
.container {
position: relative;
transform-style: preserve-3d;
height: 100vh;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
这样做会将文本放置在容器的垂直中心,但会稍微偏离水平方向的右侧。我会认为“左:50%”会正确地水平居中,不是吗?
最佳答案
关闭,但您还需要添加 translateX
。幸运的是,有一个很好的简写方式可以同时完成 X 和 Y 变换:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
它稍微偏离中心的原因是 left: 50%
插入元素,使其左侧恰好位于 50%。添加 transformX(-50%)
会取消该额外空间。请看下面的片段:
.box-container {
position: relative;
height: 200px;
}
.center-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="box-container">
<div class="center-box"></div>
</div>
关于html - 平移(Y)垂直中心方法不起作用 - 稍微偏离中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37622753/