Центрирането вертикално и хоризонтално с помощта на 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;
        }

Вижте fiddle тук

person Devin    schedule 05.09.2014
comment
Благодаря и на Джош, и на Фабио! И двата отговора са верни. - person Dmitry Buzolin; 06.09.2014