使用translateX/Y垂直和水平居中不能按预期工作

Question

这个:垂直居中工作很棒 代码:

`   <div class="container">
        <h1>Vertical center with only 3 lines of code</h1>

        <section class="text">
            <p>I'm vertically aligned! Hi ho Silver, away!</p>
        </section>
    </div>`    

但是,如果我尝试使用相同的方法水平居中

left: 50%; translateX(-50%);

在CSS中的.container元素中取消注释两行后,我得到了奇怪的结果:容器水平居中,但是垂直居中丢失了.我在这里缺少什么,以及如何实现我想要的:通过translateX/Y将容器垂直和水平地放在页面中心？

Answer 1

它不起作用的原因是后者属性会覆盖前一个属性.因此,您只能看到水平居中.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%); /* This would be overwritten */
    transform: translateX(-50%); /* By this.. */
}

解决方案是组合这样的值:

transform: translateX(-50%) translateY(-50%);

要么..

transform: translate(-50%, -50%);

更新示例 - 添加了供应商前缀.