Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 Если вы работаете с HTML и CSS, то вы можете столкнуться с проблемой горизонтального и вертикального выравнивания элемента. Вариантов решить проблему - множество. Мы, конечно, понимаем, что настоящий IT-специалист должен иметь черный пояс по гуглению, однако все же рекомендуем сэкономить время в будущем и ознакомиться с самыми популярными подходами к выравниванию.

2 <h2>Подход № 1</h2>

3 В поддерживаемых браузерах (https://caniuse.com/transforms2d) вы сможете задействоватьtop: 50%/left: 50%в комбинации сtranslateX(-50%) translateY(-50%), что обеспечит динамическое горизонтальное/вертикальное центрирование элемента.

4 Вот как это выглядит в коде:

5 <h2>Подход № 2</h2>

6 Тоже касается поддерживаемых браузеров. Вы можете присвоить свойствуdisplay _значение _flex _и задействовать _align-items: center с justify-content: center, что обеспечит вертикальное и горизонтальное центрирование. Но тут главное не забыть добавить вендорные префиксы - тогда данный прием сработает в большем числе браузеров:

7 <h2>Подход № 3</h2>

8 Случается, что надо удостовериться, что высота элементаhtml/bodyравняется 100 %. Для вертикального выравнивания присваиваем свойствамheight _и _widthродительского элемента значение100%, а также добавляемdisplay: table. Что касается дочернего элемента, то меняем значениеdisplay _на _table-cellи добавляемvertical-align: middle.

9 Если речь идет о горизонтальном выравнивании текста и прочих inline-элементов, можно задействоватьtext-align: centerилиmargin: 0 auto, причем даже если вы работаете с блоковым элементом. По идее, код ниже должен быть эффективен в большинстве браузеров:

10 <h2>Подход № 4</h2>

11 Тут мы предполагаем, что нам заранее известна высота текста, в нашем случае - это18px. Теперь надо всего-то присвоить свойствуpositionэлемента значениеabsolute, а также подвинуть его сверху на50%по отношению к родительскому элементу. В конце концов, свойствуmargin-topследует присвоить отрицательное значение, которое равно половине высоты элемента:

12 <h2>Подход № 5</h2>

13 Иногда родительский элемент имеет фиксированную высоту. Для вертикального выравнивания надо всего-то присвоить свойству дочернего элементаline-heightвысоту родительского элемента.

14 По материалам StackOverflow: https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically