Css position absolute center: Absolute Centering in CSS. If you want to center something… | by Manisha Basra | Frontend Weekly

В любом случае, сделать ваш контент правильно выровненным, красивым и в принципе потрясающим — непростая задача в CSS.Я видел достаточно людей, которые боролись с этим, и продолжаю замечать некоторые «критические» ошибки, когда дело касается настоящего адаптивного дизайна.

Но не бойтесь: если вы боролись с вертикальным выравниванием CSS — как мой коллега, возможно, — вы попали в нужное место.

Давайте поговорим о свойстве CSS Vertical Align

Когда я начал заниматься фронтенд-разработкой, у меня были небольшие проблемы с этим свойством. Я подумал, что его следует использовать как классическое свойство text-align.О, если бы это было так просто …

Свойство CSS вертикального выравнивания плавно работает с таблицами, но не с div или любыми другими элементами. Когда вы используете его в div, он выравнивает элемент вместе с другими div, а не содержимое — что мы обычно хотим). Это работает только с дисплеем : inline-block; .

Вот пример:

См. Pen 1 # Example_OutSystems Experts — Vertical-align on divs от Александра Сантоса (@alexandre_santos) на CodePen.

Мы хотим центрировать контент, а не сам Div!

У вас есть два подхода. Если у вас есть только некоторые элементы div с текстом, такие как панель навигации, вы можете использовать свойство line-height , что означает, что вам нужно знать высоту элемента, но вам не нужно устанавливать высоту. Таким образом, ваш текст всегда будет по центру.

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

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

См. Pen 2 # Example_OutSystems Experts — Navbar with line-height от Александра Сантоса (@alexandre_santos) на CodePen.

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

Для того, чтобы это работало, у вас должен быть родительский контейнер с display: table; , и внутри этого контейнера у вас будет количество столбцов, которое вы хотите выровнять по центру, с display: table-cell; (и vertical-align: middle; ) свойство.

Давайте посмотрим на пример:

См. Pen 3 # Example_OutSystems Experts — Выравнивание ячеек таблицы по вертикали Александра Сантоса (@alexandre_santos) на CodePen.

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

Свойство Position

Начнем с основ:

• положение: статическое; — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML.
• позиция: абсолютная; — используется для определения точной позиции, в которой должен находиться элемент. Эта позиция всегда связана с ближайшим предком в относительной позиции (не статической).Знаете ли вы, что произойдет, если вы не определите точное положение элемента? Вы теряете над этим контроль! Он отображается случайным образом, полностью игнорируя документооборот. По умолчанию он отображается в верхнем левом углу.
• позиция: относительная; — используется для позиционирования элемента относительно его нормального положения (статика). Эта позиция сохраняет порядок потока документа.
• позиция: фиксированная; — используется для позиционирования элемента относительно окна браузера, чтобы он всегда был виден в области просмотра.

Примечание : Некоторые свойства, такие как top и z-index , работают, только если элемент имеет позицию (не статичную).

Давайте сделаем наши грязные руки еще грязнее!

Вы хотите выровнять рамку по центру страницы?

Сначала получите элемент с относительным положением и желаемыми размерами. Например: 100% ширины и высоты.

Второй шаг может отличаться в зависимости от ваших целевых браузеров, но вы можете использовать один из двух вариантов:

• Старый вариант : Вам нужно знать точный размер коробки, чтобы удалить половину ширины и половину высоты коробки.Как это:

См. Pen 4 # Example_OutSystems Experts — Абсолютное позиционирование с рамкой размера, автор Александр Сантос (@alexandre_santos) на CodePen.

• Классная новая опция CSS3 : добавьте свойство преобразования со значением перевода -50%, и оно всегда будет центрировано. Как это:

См. Перо 5 # Example_OutSystems Experts — Абсолютное позиционирование без рамки от Александра Сантоса (@alexandre_santos) на CodePen.

По сути, если вы хотите центрировать контент, никогда, (никогда, никогда, никогда!) Не используйте top: 40% или left: 300px .Это отлично работает на ваших тестовых экранах, но не по центру. Не совсем.

Помните фиксированное положение? Вы можете сделать то же самое, что и с абсолютным положением, но вам не нужно относительное положение в родительском элементе — оно всегда будет относительно окна браузера.

CSS Vertical Align Criers: вы слышали о Flexbox?

Вы можете использовать макет flexbox, вариант, о котором мой мальчик Динис писал некоторое время назад. Ах да, это намного лучше, чем любой из других доступных вариантов.С помощью flexbox манипулировать элементами по-разному — это детская игра. Даже Рикардо мог это сделать.

Проблема в том, что вам нужно отказаться от некоторых браузеров, например IE9 и ниже. Отпусти. Отпусти … не могу больше сдерживаться. (Да, теперь он застрял в вашей голове. Пожалуйста.)

Вот пример того, как центрировать коробку по вертикали:

См. Pen 6 # Example_OutSystems Experts — Макет Flexbox без поля размера от Александра Сантоса (@alexandre_santos) на CodePen.

Используя макет flexbox, вы можете иметь более одного центрированного блока и правильно выровнять его. Но это уже история для другого раза!

А как насчет CSS Grid?

CSS Grid Layout — самая мощная система компоновки, доступная в CSS. Основное отличие от Flexbox заключается в том, что он работает в двухмерной системе, то есть может обрабатывать как столбцы, так и строки, в отличие от Flexbox, который в значительной степени является одномерной системой. По этой причине это может быть подходящим для создания более сложных макетов, таких как шаблон галереи в пользовательском интерфейсе OutSystems.

При этом его можно использовать просто для центрирования элементов в контейнере! Вот пример того, как центрировать коробку по вертикали:

См. Перо CodePen Home 7 # Example_OutSystems Experts — Макет сетки без поля размера, автор Бернардо Кардосо (@BenCardoso) на CodePen.

Подобно Flexbox, этот подход также требует отказа от старых браузеров, хотя поддержка в основных из них совершенно стабильна.

Чтобы узнать больше о CSS Grid, ознакомьтесь с этим полным руководством и некоторыми практическими примерами.

No More CSS Vertical Align Tears

Вертикальное выравнивание во многом похоже на детский шампунь Джонсона: без разрывов. Если вы последуете тому, чему научились с помощью этих нескольких примеров, вы также сможете быстро освоить вертикальное выравнивание.

. . .

Некоторое время спустя я проходил мимо дома Рикардо, но его там не было. Кто-то сказал мне, что он заснул на одной из многих удобных кушеток нашей компании.

Похоже на технический нокаут.

Но когда я посмотрел на экран его ноутбука…

Какого черта он делал? Играть в игры, пока он должен был работать?

Это очень много цветов для понедельника, который начался таким серым.

Ссылки и дополнительная литература

Flexbox и абсолютное позиционирование

Недавно я пытался создать приложение для видеоконференцсвязи с открытым исходным кодом специально для онлайн-встреч. Кажется, как и любой другой разработчик на планете. Приложения для видеоконференцсвязи — это новые чат-боты.Может быть.

Это также было хорошей причиной для меня лучше узнать OpenTok, поскольку раньше у меня не было сценария использования для сборки. Я, вероятно, запишу весь процесс в виде длинного поста, состоящего из нескольких частей, когда я на самом деле приведу его в разумную форму MVP.

Но этот мини-пост о Flexbox и абсолютном позиционировании, а также о незначительной ошибке (по крайней мере, я так думаю, что я зарегистрировал ее) в Firefox DevTools.

Что происходит, когда вы

Я не мог быть единственным, кто пробовал это, верно? Хотя для меня это был первый раз, когда я действительно использовал такую ​​комбинацию, хотя я читал об этом, когда изучал спецификацию Flexbox.

Вот почему я знал, что есть подробный раздел 4.1. Абсолютно позиционированные Flex Children. Я сделал , а не , запомнил спецификацию, я просто знал, что такой раздел существует, хорошо?

Позвольте мне выделить ключевые моменты, которые я считаю наиболее подходящими:

… абсолютно позиционированный дочерний элемент гибкого контейнера не участвует в гибкой компоновке.

однако:

Статическое положение абсолютно позиционированного дочернего элемента гибкого контейнера определяется таким образом, что дочерний элемент позиционируется, как если бы он был единственным гибким элементом в гибком контейнере, при условии, что и дочерний элемент, и гибкий контейнер были коробки фиксированного размера их использованного размера.

, что означает:

… если вы установите, например, align-self: center; на абсолютно позиционированном дочернем элементе гибкого контейнера, автоматические смещения на дочернем элементе центрируют его по поперечной оси гибкого контейнера.

Давайте разберемся с этим. Первая часть довольно проста. Если вы позиционируете гибкий элемент абсолютно, он больше не участвует в гибком макете. Это означает, что любые свойства гибкости элемента становятся спорными. Вы можете удалить их, если хотите.

В следующей части объясняется, что абсолютно позиционированный элемент ведет себя как единственный гибкий элемент в гибком контейнере. Итак, сократите свою мысленную модель до:

Свойства выравнивания блока по-прежнему применяются к гибкому элементу, даже если он абсолютно позиционирован, что означает, что использование align-self будет иметь эффект. Подробную информацию о том, как нормальное поведение работает в этом случае, можно найти в соответствующем разделе модуля выравнивания CSS Box Level 3.

Дополнительная информация, в которую я не буду вдаваться: 8.Детали размеров и позиционирования, которые детализируют абсолютное позиционирование элементов размером . (Возможно, это может быть сообщение в блоге в будущем)

Firefox DevTools имеет функцию, которая сообщает вам, почему определенный CSS неактивен. Это довольно круто, и я использую его для свойств, связанных с макетом, когда я создаю что-то. Однако он говорит, что свойство align-self не активно, потому что абсолютно позиционированный элемент не является гибким элементом.

Но это имеет эффект.И сам браузер ведет себя так, как ожидалось. Полагаю, это ошибка DevTools? Я не уверен, поэтому я зарегистрировал ошибку и надеюсь, что кто-то ее отследит.

TL; DR о том, почему я отказался от гибкого элемента

На данный момент, как работает мое приложение, все видеопотоки попадают в единственный родительский контейнер.Я хочу иметь возможность сосредоточиться на одном потоке и сделать его дисплеем большого размера (общий шаблон пользовательского интерфейса в большинстве клиентов видеоконференцсвязи).

Это происходит, когда CSS-класс .focused добавляется к выбранному контейнеру элемента потока, но поскольку все потоки находятся на одном уровне, это своего рода хакерский способ добиться такого эффекта. Посмотрим, смогу ли я изменить разметку, но пока не знаю, как это сделать.

В любом случае, проект, над которым я работаю, находится на GitHub, если кому-то хоть немного интересно.

Он медленно работает и очень незавершенный, и если вы думаете, что выглядит достойно , это потому, что я убегаю от своих более сложных проблем и вместо этого работаю над макетом. ¯ \ _ (ツ) _ / ¯

css

Как центрировать что угодно с помощью CSS

Недавно мы погрузились в основные концепции макета CSS и исследовали различия между абсолютным и относительным позиционированием. Мы собираемся продолжить это с другим докладом о макете CSS, на этот раз основанном на фундаментальном вопросе, который задает почти каждый новый разработчик: как вы центрируете что-то?

Существует множество различных типов веб-элементов и ситуаций макета, каждая из которых требует уникального решения для центрирования (как по вертикали, так и по горизонтали).Сегодня мы рассмотрим несколько этих сценариев, чтобы вы могли понять, как они работают, и уйти с уверенностью, чтобы сосредоточить что угодно!

Для кого это?

В последнее время я получил много отзывов от дизайнеров, которые испытывают трудности с базовыми методами и концепциями верстки в CSS. По общему мнению, многие новички в CSS просто «возятся» с кодом, пока все, наконец, не заработает.

Побывав там несколько раз, я знаю, что это чрезвычайно тяжелый период вашего профессионального роста.Знание того, что ответ находится прямо перед вами, и неспособность понять его мучительно и отнимает много времени.

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

Центрировать элемент по горизонтали

Первый сценарий, который мы атакуем, на сегодняшний день является одним из наиболее распространенных: центрирование элемента по горизонтали в области просмотра или в окне браузера. Для начала давайте выделим простой div и придадим ему базовый стиль.

Как видите, по умолчанию наш div появляется в верхнем левом углу окна просмотра. Уловка здесь в том, что нам нужно, чтобы div оставался в центре окна, независимо от того, какой размер окна сейчас.Это означает, что мы не можем использовать абсолютное позиционирование, чтобы разместить его в определенной точке, потому что оно не будет центрировано на любых других возможных размерах окна.

Вместо этого нам нужно использовать значение «авто», которое можно применить к полям. Вот как это работает:

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

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

Как видите, в нашем элементе отсутствуют верхнее и нижнее поля, но для левого и правого поля установлено значение auto , что обеспечивает идеальное центрирование элемента.

Что нужно помнить

При использовании трюка с автоматическими полями следует помнить несколько важных вещей. Прежде всего, у должна быть определенная ширина, объявленная для элемента, который вы центрируете. Объявление высоты не обязательно, вы можете разрешить содержимому определять высоту, если хотите, что является настройкой по умолчанию, но всегда должна быть установлена ​​ширина.

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

div { высота: 400 пикселей; ширина: 400 пикселей; фон: #eee; маржа: авто; } п { ширина: 60%; маржа: авто; шрифт: 14px / 1.5 Helvetica, без засечек; }

Как видите, у меня установлены автоматические поля как для абзаца, так и для его родительского div. Это расположило все по центру по горизонтали, но не повлияло на вертикальное положение.

Центрировать абсолютно позиционированный элемент

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

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

Здесь мы видим, что для абсолютно позиционированного элемента, содержащегося внутри относительно позиционированного элемента, нам нужно установить свойство left , подставив некоторые числа в эту формулу. Вот тестовый пример:

.container { высота: 300 пикселей; ширина: 300 пикселей; фон: #eee; маржа: 10 пикселей автоматически; положение: относительное; } .коробка { высота: 100 пикселей; ширина: 100 пикселей; фон: # 222; позиция: абсолютная; }

Давайте посмотрим, сможем ли мы центрировать черный ящик по горизонтали.Используя нашу формулу, мы видим, что для свойства left необходимо установить значение 100 пикселей.

.container { высота: 300 пикселей; ширина: 300 пикселей; фон: #eee; маржа: 10 пикселей автоматически; положение: относительное; } .коробка { высота: 100 пикселей; ширина: 100 пикселей; фон: # 222; позиция: абсолютная; слева: 100 пикселей; }

С помощью этого кода мы установили расстояние между левой стороной блока и краем его родительского контейнера на 100 пикселей, что идеально центрирует его.

с шириной текучей среды

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

Для этого нам нужно использовать процентное значение для оставшегося значения . Очевидный ответ — использовать 50%, но на самом деле это не сработает, потому что вы не учитываете ширину центрируемого элемента. Чтобы это работало, нам нужно добавить отрицательное левое поле, равное половине ширины дочернего элемента.

Используя эту логику, мы применяем левое поле в пятьдесят отрицательных пикселей вместе с левым значением 50%, и наш div снова идеально центрируется по оси x.

.container { высота: 300 пикселей; ширина: 70%; фон: #eee; маржа: 10 пикселей автоматически; положение: относительное; } .коробка { высота: 100 пикселей; ширина: 100 пикселей; фон: # 222; позиция: абсолютная; / * Метод центрирования 2 * / маржа: 0px 0 0 -50px; осталось: 50%; }

Важно отметить, что это также работало бы, если бы наш дочерний элемент имел плавную ширину.Мы используем те же шаги, что и раньше, и получаем что-то вроде следующего:

.container { высота: 300 пикселей; ширина: 70%; фон: #eee; маржа: 10 пикселей автоматически; положение: относительное; } .коробка { высота: 100 пикселей; ширина: 70%; фон: # 222; позиция: абсолютная; / * Метод центрирования 2 * / маржа: 0px 0 0 -35%; / * Половина 70% / * осталось: 50%; }

Мертвая точка элемента

Теперь, когда у нас есть несколько простых и сложных методов центрирования в нашем поясе инструментов, пришло время решить загадку идеального центрирования элемента как по горизонтали, так и по вертикали.

К счастью, для этого мы можем использовать тот же метод, который мы только что изучили, нам просто нужно учитывать высоту. На этот раз мы также собираемся центрировать родительский и дочерний объекты по вертикали и горизонтали. Вот код для этого:

.container { высота: 300 пикселей; ширина: 300 пикселей; фон: #eee; позиция: абсолютная; маржа: -150px 0 0 -150px; осталось: 50%; верх: 50%; } .коробка { высота: 100 пикселей; ширина: 100 пикселей; фон: # 222; позиция: абсолютная; / * Метод центрирования 2 * / маржа: -50px 0 0 -50px; осталось: 50%; верх: 50%; }

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

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

Центрирование текста

В качестве следующего трюка я научу вас кое-чему интересному о центрировании текста.Начнем с простого элемента h2 внутри контейнера div.

Теперь я уверен, что вы уже знаете, как центрировать этот текст по горизонтали в пространстве. Обычно это одна из первых вещей, которую вы изучаете в CSS. Просто установите для свойства text-align значение center.

.container { высота: 400 пикселей; ширина: 400 пикселей; фон: #eee; маржа: 50 пикселей автоматически; } h2 { шрифт: 40px / 1 Helvetica, без засечек; выравнивание текста: центр; }

Легко, правда? Но теперь предположим, что мы хотим также центрировать эту строку текста по вертикали. Если бы это был абзац, мы, вероятно, приняли бы во внимание описанные выше методы, но поскольку это всего лишь одна строка, мы можем использовать изящный трюк.

Все, что нам нужно сделать, это установить для свойства line-height высоту контейнера. Я сделал это ниже, используя сокращенный синтаксис шрифта.

.container { высота: 200 пикселей; / * Устанавливаем это значение для высоты строки * / ширина: 400 пикселей; фон: #eee; маржа: 150 пикселей авто; } h2 { шрифт: 40px / 200px Helvetica, без засечек; выравнивание текста: центр; }

Предупреждение: Этот трюк работает только с одной строкой текста и является немного хакерским, поэтому он может не подходить для всех ситуаций.

Центрирование фонового изображения

Последнее, чему мы научимся центрировать, — это фоновое изображение CSS. Для начала мы создадим еще один контейнерный div, но на этот раз оставим его пустым и добавим изображение с помощью CSS.

.container { высота: 300 пикселей; ширина: 300 пикселей; маржа: 150 пикселей авто; фон: #eee url (http://lorempixum.com/100/100/nature/4) no-repeat; }

Как видите, по умолчанию изображение появляется в верхнем левом углу, если не задан повтор. Однако оказывается, что вы можете переместить его в один из девяти различных заранее назначенных слотов. Они показаны ниже:

Мы выполняем это перемещение с помощью свойства background-position .Просто вызовите это свойство и установите любое из значений, перечисленных выше.

.container { высота: 300 пикселей; ширина: 300 пикселей; маржа: 150 пикселей авто; фон: #eee url (http://lorempixum.com/100/100/nature/4) no-repeat; background-position: верхний центр; }

В качестве альтернативы мы можем использовать для этого сокращенный синтаксис. Просто добавьте одно из значений в конец потока значений в фоновом свойстве .

.container { высота: 300 пикселей; ширина: 300 пикселей; маржа: 150 пикселей авто; фон: #eee url (http://lorempixum.com/100/100/nature/4) центр без повтора; }

Заключение

Вот и все! Теперь вы должны быть полностью уверены в своей способности справиться практически с любой ситуацией центрирования с помощью CSS, от точного центрирования div до вертикального центрирования строки текста внутри его контейнера и за его пределами.

Как я могу центрировать абсолютно позиционированный элемент в div?

Центр абсолютного деления по вертикали

Это можно сделать с помощью display: table; в родительском div и display: table-cell; вертикальное выравнивание: по центру; в дочернем div

Размещение элементов в Интернете, Центрирование с использованием абсолютного положения · Добавьте слева: 50% к элементу, который нужно центрировать. · Добавьте отрицательное левое поле, равное половине ширины CSS, чтобы расположить абсолютные центральные элементы по горизонтали. Чтобы позиционировать абсолютный центр элемента по горизонтали, вам понадобится контейнер с фиксированной шириной, свойства left и right должны быть установлены на 0 (ноль), а поля (справа и слева) должны быть установлены на auto.Не забудьте добавить относительное положение к основному контейнеру.

Горизонтальное центрирование абсолютного элемента, #somelement {width: 200px; позиция: абсолютная; осталось: 50%; Если вы знаете ширину, вы также можете использовать третий вариант, и он будет по центру. Центрирование абсолютно позиционированного элемента — это проблема CSS, которая возникает время от времени. Посмотрим, как это делается.

Центрировать div по горизонтали и вертикали

Макет CSS — горизонтальное и вертикальное выравнивание, Центрирование элементов в CSS — это постер жалобы CSS.Почему и по горизонтали, и по вертикали 4) Кроме того, в том же перо элемент не может оставаться по центру по вертикали, если у него есть родственный элемент, который растягивает вертикальную высоту родителя. Есть ли способ ЦЕНТРИРОВАТЬ A DIV по вертикали и горизонтали, но, что важно, содержимое не будет обрезано, когда окно меньше содержимого. Div должен иметь цвет фона, ширину и высоту. Я всегда центрировал div с абсолютным позиционированием и отрицательными полями, как в приведенном примере.

Центрирование в CSS: полное руководство, Попробовав много вещей, я нашел способ, который работает. Я делюсь этим здесь, если это кому-то будет полезно. Вы можете увидеть, как это работает: http://jsbin.com/iquviq/30/edit .content {width: элементы по центру по вертикали. Чтобы вертикально центрировать элементы по оси Y, мы можем использовать align-items: center; свойство для вертикального выравнивания наших элементов. Обратите внимание на CSS здесь, поскольку тело является нашим родительским контейнером, мы гарантируем, что он расширяет высоту на 100%, а затем также делаем тег раздела на 100% по высоте.

Центрирование DIV по горизонтали и вертикали, Центрирование элемента по горизонтали и вертикали — очень распространенный вопрос на собеседовании. Предположим, что дочерний элемент окружен родительским элементом. Для горизонтального центрирования блочного элемента (например,