Центрирование по вертикали и горизонтали с использованием translateX/Y не работает должным образом

Это: вертикальное центрирование отлично работает Код:

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

после раскомментирования двух строк в элементе .container в CSS я получаю странный результат: контейнер центрируется по горизонтали, но центрирование по вертикали теряется. Что мне здесь не хватает и как добиться того, чего я хочу: центрировать контейнер по вертикали и горизонтали на странице с помощью translateX/Y ?


css centering
person Dmitry Buzolin    schedule 05.09.2014    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Причина, по которой это не работало, заключалась в том, что последнее свойство перезаписывало предыдущее. Таким образом, вы увидите только горизонтальное центрирование.

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

Решением было бы объединить значения следующим образом:

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

or..

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

Обновленный пример — добавлены префиксы продавца.

person Josh Crozier    schedule 05.09.2014

arrow_upward
2
arrow_downward

Вы действительно близки, измените свой 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;
        }

см. скрипт здесь

person Devin    schedule 05.09.2014
comment
Спасибо вам обоим, Джош и Фабио! Оба ответа правильные. - person Dmitry Buzolin; 06.09.2014