Question

这：vertical centering working great 代码：

`   <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%);

Updated Example - 添加了供应商前缀。

Answer 2

你真的很接近，改变你的CSS：

        body {
            font-family: Helvetica Neue, Helvetica, sans-serif;
            background: #59488b;
            padding: 1em;
            text-align:center;
        }
        * {
            text-align:center;
        }
        .container {
            position: absolute;
            top: 50%;
            left:50%;
            transform: translateY(-50%) translateX(-50%);
            border: 2px solid red;
        }
        .text p {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
        section {
            display: block;
            max-width: 500px;
            background: #433669;
            margin: 0 auto 1em;
            height: 100px;
            border-radius: .5em;
            color: white;
            padding: 1em;
        }

See fiddle here

使用translateY不能按预期工作，垂直和水平居中

2 个答案: