Найти в Дзене
Help me please!

Элемент по центру DIV горизонт и/или вертикаль.

Рассмотрим три способа выравнивания. Тег CENTER. CSS margine. Flex Box. Рабочий код. DEMO.
Оглавление

Тег <CENTER>.

Самый простой способ.

Этот способ выручит когда внутри DIV много разных элементов. Если не выравнивается рекламный блок AdSense. Как выровнять блок AdSense? Делайте так:

<CENTER>Ваш элемент (группа тегов)</CENTER>

Тег <CENTER> эффективный, но устаревший тег.

Рассмотрим CSS.

Примените к внутреннему элементу свойство: margin: 0 auto;

и обязательно свойство: width: 500px.

Должно быть так:

<DIV><DIV style='width: 500px;margin: 0 auto;'>элементы</DIV></DIV>

Это актуально и для тега <P>.

Если у вас элемент не блочный, а строчный (INPUT, H1, H2, SPAN, BUTTON), то его можно выровнять только по горизонтали:

<DIV><SPAN style='text-align: center;'>элементы</SPAN></DIV>

Технология FlexBox.

Самый современный способ выравнивания элементов: CSS FLEX.

<DIV style='display: flex; justify-content: center; align-items: center;'>

<DIV>элементы</DIV>

<DIV>элементы</DIV>

<DIV>элементы</DIV>

</DIV>

Этот метод (CSS FLEX) несколько труден для понимания. Плохо запоминаются его свойства. Но есть отличная подсказка, которой я постоянно пользуюсь. Вот здесь http://profi.spage.me/css/see-how-flexbox-works-in-css-on-gif-images/, есть GIF картинки которые наглядно показывают то или иное свойство технологии FlexBox.