Выравнивание формы по центру на css
Добрый день, такая проблема, сделал форму входа. По горизонтали по центру выровнял с помощью margin: 0 auto; . Но по вертикали не выровнять, как сделать по центру (вертикали)?
Отслеживать
4,306 14 14 золотых знаков 42 42 серебряных знака 93 93 бронзовых знака
задан 5 мар 2016 в 14:46
169 1 1 золотой знак 2 2 серебряных знака 11 11 бронзовых знаков
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
.modal
Отслеживать
ответ дан 6 мар 2016 в 19:26
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
top: calc(50% - высота_блока/2); left: calc(50% - ширина_блока/2); Отслеживать
ответ дан 6 мар 2016 в 18:02
random2093847 random2093847
882 4 4 серебряных знака 17 17 бронзовых знаков
Разобрался, может кому понадобится, добавил:
position: fixed; top: 50%; left: 50%; margin-top: -. ; margin-left: -. ; Вместо точек размер блока / на 2.
Отслеживать
ответ дан 5 мар 2016 в 15:04
169 1 1 золотой знак 2 2 серебряных знака 11 11 бронзовых знаков
Укажите у родителя
display: flex; // FlexBox align-items: center; // выравнивает по вертикали justify-content: center; //выравнивает по горизонтали Отслеживать
ответ дан 6 мар 2016 в 19:39
Kuat Mustafin Kuat Mustafin
692 4 4 серебряных знака 11 11 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать выравнивание формы по центру?
Привет всем. Подскажите, как сделать выравнивание формы авторизации по центру под разное расширение экрана. На компьютере по центру форма, а вот на ноуте — оказывается внизу. Хочется централизации на любом расширении
- Вопрос задан более трёх лет назад
- 8870 просмотров
2 комментария
Оценить 2 комментария
Ilya Suhodolskiy @suhodolskiy
Выравнивание слоя по центру
Основное отличие веб-страницы от листа бумаги заключается в их размерах. Если лист имеет заданную фиксированную ширину и высоту, то по отношению к веб-сайту такого сказать нельзя. Веб-документ отображается в окне браузера и может изменять свои размеры в зависимости от настроек операционной системы, типа монитора, установленного разрешения и т.д. Использование выравнивания позволяет проигнорировать указанную особенность и располагать элемент у края окна или по его центру.
Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя атрибут align тега .
Использование отступов
Если добавить отступ к слою слева с помощью свойства margin-left , то визуально слой сместится на указанное значение вправо. Зная ширину слоя, его можно сместить так, чтобы слой располагался по центру веб-страницы. Для чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя в процентах и полученное значение разделить пополам. Результат и будет значением свойства margin-left (пример 1).
Пример 1. Использование margin-left
Выравнивание
Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа слева и справа (пример 2).
Пример 2. Использование отступов
Выравнивание Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
В данном примере показано размещение слоя шириной 40% по центру. Хотя сама ширина никак напрямую не задается, она определяется значением свойств margin-left и margin-right . Они устанавливают отступ слева и справа, чтобы слой располагался по середине, их значения должны быть равны.
Следующий способ более универсален и уже не зависит от того, какие единицы измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).
Пример 3. Применение значения auto
Выравнивание
В данном примере ширина слоя устанавливается 400 пикселов и выравнивается по центру с помощью значения 0 auto свойства margin . Первый аргумент устанавливает нулевой отступ одновременно сверху и снизу от слоя, а второй аргумент выравнивает слой по центру горизонтали окна браузера.
Атрибут align тега
Еще один способ размещения по центру вообще не требует использования никаких стилей и связан с атрибутом align тега . Указывая значение center , заставляем содержимое слоя выравниваться по его центру. Поэтому необходимо создать два слоя, один из которых будет служить контейнером для другого, как показано в примере 4.
Пример 4. Атрибут align
Выравнивание
Опять же, как и в случае использования свойства text-align , размещаться по центру будет и текст внутри слоя. Поэтому следует насильно задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать не требуется, она будет вычисляться автоматически и занимать все доступное пространство веб-страницы.
Абсолютное позиционирование слоя
При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Положение определяется с помощью стилевого свойства z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.
Вначале следует указать ширину и высоту слоя с помощью width и height . Размеры можно задавать в пикселах, процентах или других единицах. Ширину, например, можно определить в процентах, а высоту в пикселах. Из-за этой особенности предлагаемый метод размещения по центру является наиболее универсальным.
Следующий шаг — задаем абсолютное позиционирование слоя через position: absolute . Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top . Эти значения остаются неизменными, независимо от используемых единиц измерения.
Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить свойства margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left ) и высоты (для margin-top ).
Чтобы высота слоя не менялась из-за его контента, включен overflow: auto , он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 5).
Пример 5. Ширина слоя в пикселах
Выравнивание
В случае использования процентной записи стиль меняется незначительно, надо так же поделить ширину и высоту пополам и добавить полученные значения в качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width , padding и border .
Пример 6. Ширина слоя в процентах
Выравнивание
Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, соответственно, поменяется и запись другого параметра. Как показано в данном примере, ширина слоя установлена в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.
Указанная особенность позволяет применять любые единицы измерения, а не ограничиваться только одной формой записи, что делает код подходящим практически для всех случаев.
Блок по центру экрана
6 способов выровнять блок по центру по вертикали и горизонтали.
Время чтения: 5 мин
Открыть/закрыть навигацию по статье
- Задача
- Готовое решение
- Разбор решения
- Гриды
- Флексбокс. Первый способ
- Флексбокс. Второй способ
- Отступ и трансформация
- Абсолютное позиционирование с известной высотой
- Абсолютное позиционирование без известной высоты
Задача
Скопировать ссылку «Задача» Скопировано
Перед вами встала задача выровнять блок по центру экрана по вертикали и горизонтали. Предположим, это будет всплывающее окно. В этом рецепте разберём все существующие на данный момент способы решения задачи.
Готовое решение
Скопировать ссылку «Готовое решение» Скопировано
Ниже перечислены все возможные способы центрирования элемента. Выберите один из них.
Центрируем при помощи гридов:
.parent display: grid; place-items: center;> .parent display: grid; place-items: center; >
Центрируем при помощи флексбокса, способ первый:
.parent display: flex; justify-content: center; align-items: center;> .parent display: flex; justify-content: center; align-items: center; >
Центрируем при помощи флексбокса, способ второй:
.parent display: flex;> .child margin: auto;> .parent display: flex; > .child margin: auto; >
.child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%);> .child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%); >
Абсолютное позиционирование, когда известна высота:
.child height: 200px; margin-inline: auto; inset-inline: 0; /* Отступ сверху 50% минус половина высоты */ inset-block-start: calc(50% - 100px);> .child height: 200px; margin-inline: auto; inset-inline: 0; /* Отступ сверху 50% минус половина высоты */ inset-block-start: calc(50% - 100px); >
Абсолютное позиционирование, когда высота неизвестна:
.child margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%);> .child margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); >
Разбор решения
Скопировать ссылку «Разбор решения» Скопировано
Перед разбором каждого из решений разберёмся со стартовым кодом. Во всех примерах зададим 100% высоты окна браузера для и , чтобы страница растянулась по высоте.
Также во всех примерах по возможности используются логические свойства, чтобы код был современным.
В качестве блока, который будем центрировать, используем тег . Именно с его помощью сейчас принято создавать всплывающие окна.
Обратите внимание, что по умолчанию у этого элемента задано абсолютное позиционирование. Переопределим позиционирование на статичное, чтобы оно нам не мешало.
Привет, это Дока!
body class="parent"> dialog class="child" open> h1>Привет, это Дока!h1> dialog> body>
html height: 100vh;> body min-height: 100%;> dialog position: static;> html height: 100vh; > body min-height: 100%; > dialog position: static; >
Гриды
Скопировать ссылку «Гриды» Скопировано
Самый современный и изящный способ центрирования элемента — при помощи гридов.
Делаем родителя — в нашем случае .parent — грид-контейнером.
.parent display: grid;> .parent display: grid; >
После этого можем использовать свойства грид-контейнера для выравнивания вложенных элементов по вертикальной и горизонтальной осям:
.parent display: grid; justify-items: center; align-items: center;> .parent display: grid; justify-items: center; align-items: center; >
Или использовать шорткат для объединения двух свойств в одно:
.parent display: grid; place-items: center;> .parent display: grid; place-items: center; >
Флексбокс. Первый способ
Скопировать ссылку «Флексбокс. Первый способ» Скопировано
Используем флексбокс для выравнивания по центру. Тут есть два способа. В первом случае будем задавать свойства родителю.
Делаем родителя флекс-контейнером:
.parent display: flex;> .parent display: flex; >
Задаём свойства для выравнивания по центру вертикальной и горизонтальной осей:
.parent display: flex; justify-content: center; align-items: center;> .parent display: flex; justify-content: center; align-items: center; >
Флексбокс. Второй способ
Скопировать ссылку «Флексбокс. Второй способ» Скопировано
Когда родитель является флекс-контейнером, ребёнку можно задать автоматические внешние отступы со всех сторон.
.parent display: flex;> .child margin: auto;> .parent display: flex; > .child margin: auto; >
Отступ и трансформация
Скопировать ссылку «Отступ и трансформация» Скопировано
В этом способе используем комбинацию внешних отступов и трансформации. Для начала выровняем блок по горизонтальной оси автоматическими отступами, а от верхнего края отодвинем на 50%:
.child margin-inline: auto; margin-block-start: 50vh;> .child margin-inline: auto; margin-block-start: 50vh; >
Верхний внешний отступ равен 50% высоты экрана, но это сдвигает элемент чуть ниже центра.
Чтобы расположить элемент ровно по центру, нужно использовать свойство transform с функцией translate Y ( ) в качестве значения.
.child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%);> .child margin-inline: auto; margin-block-start: 50vh; transform: translateY(-50%); >
При трансформации проценты вычисляются от фактического размера элемента, к которому эта трансформация применяется. Поэтому наш блок поднимается вверх ровно на половину своей высоты.
Абсолютное позиционирование с известной высотой
Скопировать ссылку «Абсолютное позиционирование с известной высотой» Скопировано
Вернём нашему диалогу абсолютное позиционирование и попробуем выровнять его в таком состоянии. Не забудем задать родителю position : relative , чтобы ребёнок позиционировался от краёв родителя.
Для начала разберём пример, когда у элемента задана фиксированная высота:
.parent position: relative;> .child position: absolute; height: 200px;> .parent position: relative; > .child position: absolute; height: 200px; >
Сначала нужно задать элементу координаты отсчёта позиции. Пока зададим 0 со всех четырёх сторон. Используем логическое свойство inset .
.child position: absolute; height: 200px; inset: 0;> .child position: absolute; height: 200px; inset: 0; >
На самом деле нам нужны нули только по горизонтали. Для выравнивания используем уже знакомый приём с автоматическими боковыми отступами.
По вертикали от верхнего края хотим оттолкнуть элемент на 50% минус половина высоты элемента. В нашем случае это 125 пикселей. Будем использовать функцию calc ( ) :
.child position: absolute; height: 250px; margin-inline: auto; inset-inline: 0; inset-block-start: calc(50% - 125px);> .child position: absolute; height: 250px; margin-inline: auto; inset-inline: 0; inset-block-start: calc(50% - 125px); >
Абсолютное позиционирование без известной высоты
Скопировать ссылку «Абсолютное позиционирование без известной высоты» Скопировано
В этом варианте высота элемента не фиксирована. Значит, нам нечего вычитать из 50% для отступа от верхнего края. Используем transform , который вычисляет проценты от размера элемента.
.child position: absolute; margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%);> .child position: absolute; margin-inline: auto; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); >