Css div center align: CSS Layout — Horizontal & Vertical Align

Выровнять Div по центру экрана

Недавно один из читателей TechWelkin заметил, что выравнивание элементов DIV является слишком большой проблемой, и использование элемента TABLE намного лучше. Если вы хотите разместить две части текста рядом, это проще сделать с помощью TABLE. Что ж, новые разработчики всегда так считают! Но по мере того, как они набираются опыта и узнают что-то новое, они понимают, что элементы DIV очень гибкие и довольно простые в использовании. Новички часто спрашивают: « как выровнять и разместить элемент DIV прямо по центру экрана? «. Эта задача состоит из трех частей:

1. Выровнять элемент div по центру по горизонтали
2. Затем выровняйте элемент div по середине по вертикали
3. И, наконец, перемещайте элемент div так, чтобы он оставался в центре экрана, когда пользователь прокручивает экран.

Такое расположение часто требуется, когда вы хотите отобразить «окно сообщений» DIV. Окна сообщений на веб-страницах традиционно располагаются в центре экрана, чтобы привлечь максимальное внимание посетителя.

Горизонтальное выравнивание по центру DIV

Это самый простой способ. Все, что вам нужно сделать, это установить левое и правое поля как auto . Браузер обнаружит это свойство CSS и автоматически выполнит горизонтальное выравнивание. Например:

 #my-div{
поле: 0 авто;
ширина: 400 пикселей;
}
 

Обратите внимание, что вам нужно будет указать определенную ширину для элемента div, потому что без указанной ширины элемент div занимает всю ширину экрана. В результате без указанной ширины вы не сможете заметить выравнивание по центру.

Вертикальное выравнивание по центру DIV на экране

Это немного сложная штука. Существует несколько вариантов выравнивания элемента div по середине по вертикали, но лучшее и кросс-браузерное решение упоминается Биллбадом в StackOverflow:

HTML

<дел>
<дел>
Контент