Центрирование элементов с помощью CSS

Совершенно допустимо использовать transform в сочетании со свойствами top и left CSS для выравнивания и центрирования элементов.

Хотите знать, готова ли ваша готовая к производству кодовая база запуска единорога для этого безумного скачка в технологиях? Не уверены в использовании передовых свойств CSS, таких как transform, не беспокоясь о пользовательском опыте? Проверьте таблицу совместимости в конце.

Готовый к производству пример

Взгляните на этот прекрасный пример:

.container {
  position: relative;
  .centered-element {
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

Это коротко. Милая. Краткий. Захватывающий дух. ("И ты тоже"!)

Выровнять по центру

.aligned-element {
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

По центру-левому краю

.aligned-element {
    
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

Выровнять по центру-правому краю

.aligned-element {
    
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

По нижнему краю

.aligned-element {
    
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

А как насчет других методов выравнивания?

Очень плохой. Очень ненадежно. Отсутствие кроссбраузерной поддержки. Нет нет.

Поддержка браузера

"Огромный." Все современные браузеры, включая Edge и IE. IE не поддерживает 3D-преобразования, которые здесь не нужны.

Сертификат W3School

См. Статью о Свойство преобразования CSS W3School для получения дополнительной информации. Надежный.

Также несколько менее надежный, MDN от Mozilla. И какой-то странный длинный документ, который никто никогда не читал.

Вопросов?

Не стесняйтесь присылать положительные отзывы и одобрения на [email protected]. Спасибо. Изначально размещено на wtlstudio.com.