Как центрировать блок внутри блока css

Абсолютное центрирование по горизонтали и вертикали в CSS

Абсолютное центрирование по горизонтали и вертикали в CSS

От автора: Все мы встречали margin: 0 auto; для выполнения горизонтального центрирования, но margin: auto; отказывался работать для вертикального… до сих пор! На самом деле абсолютное центрирование требует всего лишь объявленной высоты и этих стилей:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

ПРЕИМУЩЕСТВА:

Кроссбраузерность (включая IE8-10)

Не требуется специальной разметки, минимум стилей

Адаптивно работает с процентными соотношениями и min-/max-

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

Центрирование вне зависимости от отступа (без box-sizing!)

Блокам можно легко менять размер

Отлично работает с изображениями

ПРЕДУПРЕЖДЕНИЕ:

Нужно заявлять высоту

Рекомендуется установка overflow: auto для предотвращения переливания содержимого

Не работает в Windows Phone

БРАУЗЕРНАЯ СОВМЕСТИМОСТЬ:

Chrome, Firefox, Safari, Mobile Safari, IE8-10.

Метод абсолютного центрирования тестировался и безупречно работает в последних версиях Chrome, Firefox, Safari, Mobile Safari и даже IE8-10.

Пояснение

После изучения спецификаций и документации вот как я понимаю принцип работы Absolute Centering:

В нормальном потоке содержимого margin: auto; равен ’0′ для верха и низа. W3.org: Если ‘margin-top’ или ‘margin-bottom’ установлены на ‘auto’, их используемое значение равно 0.

position: absolute; выводит блок из обычного потока содержимого, отображая остальной контент так, как будто этого блока тут не было. Developer.mozilla.org: …абсолютно позиционированный элемент вынимается из потока и, таким образом, не занимает пространства

Установка top: 0; left: 0; bottom: 0; right: 0; задает браузеру новый ограничивающий прямоугольник для блока. На этом этапе блок заполнит все доступное пространство в своем офсетном родительском элементе, который является телом body или контейнером position: relative;. Developer.mozilla.org: Для абсолютно позиционированных элементов свойства top, right, bottom и left определяют офсеты от края содержащего блока элемента (относительно которого позиционирован элемент).

Назначение блоку width или height препятствует занятию блоком всего доступного пространства и заставляет браузер посчитать margin: auto на основе нового ограничивающего прямоугольника. Developer.mozilla.org: Поле [абсолютно позиционированного] элемента затем располагается внутри этих офсетов.

Так как блок позиционирован абсолютно и, следовательно, вне нормального потока, браузер назначает подходящие значения margin-top и margin-bottom, центрируя элемент в ранее определенных границах.
W3.org: Если ни одно из трех [top, bottom, height] не установлено на ‘auto’: если и ‘margin-top’, и ‘margin-bottom’ стоят на ‘auto’, решите уравнение с тем дополнительным ограничивающим условием, что два поля получают равные значения. Иначе говоря: отцентрируйте блок по вертикали

Похоже, Absolute Centering – это предназначенное применение margin: auto; согласно спецификации и, следовательно, должно работать во всех браузерах, подчиняющихся стандартам.

TL;DR: Абсолютно позиционированные элементы не отображаются в нормальном потоке, поэтому margin: auto; центрирует по вертикали внутри границ, установленных top: 0; left: 0; bottom: 0; right: 0;.

Как центрировать изображение и текст внутри блока

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

enter image description here

CSS-я получил до сих пор:

, если вы предоставите HTML также –

Предоставьте скрипку, пожалуйста 🙂 – Alberto

ответ

Пожалуйста, обратите внимание на эту DEMO

Объяснение о: до того элемента:

Это невидимый элемент псевдо-элемент, который используется для лучшего вертикальное центрирование: эмулирует элемент встроенного блока 0-размера, который в сочетании с обычным элементом линейного блока ( .centered ) позволяет использовать vertical-align .

UPDATE: Вы можете установить высоту .block , чтобы увидеть, как это будет по центру по вертикали: http://jsfiddle.net/jb5EJ/5/

UPDATE 2: ли это ближе: http://jsfiddle.net/jb5EJ/13/

Спасибо! Я немного отредактировал его (http://jsfiddle.net/jb5EJ/3/), и он, похоже, делает то, что я хочу! – katspaugh

Но вы удалили .block: after, вот почему он хочет работать отлично. –

Я не вижу разницы с или без ‘.block: before’, не могли бы вы объяснить, что он делает? Во всяком случае, маркировка принята, спасибо! – katspaugh

vertical-align:middle; Добавить в img тоже . Кроме того, я хотел бы предложить, чтобы добавить height в outer класс

Checkout ссылку. Надеюсь, вы получите решение.

TLDR: только с этим CSS вы можете поместить элемент в абсолютном центре (как по горизонтали, так и по вертикали):

Выравнивание по центру блока внутри блока

Выравнивание по центру блока внутри блока

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

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

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

Выравнивание блока внутри блока.

Общие стили для всех способов:

Зададим позицию блока относительной по отношению к окну браузера. Это в дальнейшем даст возможность блоку-дочке задать абсолютное позиционирование уже к блоку-родителю.

.block <
width: 250px;
height: 300px;
background-color: red;
position: relative;

Исходные размеры картинки-иконки такие же, как и ширина красного прямоугольника, уменьшим её максимальные размеры.

.icon <
max-width: 60%;
max-height: 60%;
>

HTML-разметка у всех способов одинаковая, отличаться будут только стили.

Способ первый

Положение изображения автоматически определяет сам браузер с помощью свойства margin: auto.

.first <
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
margin: auto;
>

Способ второй

Этот способ выравнивания по центру никогда еще не подводил. Вы спросите, зачем нужно последнее свойство transform? Если убрать transform, то иконка не будет стоять точно по центру, поскольку не учитываются её собственные размеры. Центр иконки не совпадает с центром блока-родителя. Мы двигаем иконку назад и вниз на половину её собственного размера.

.second <
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
>

Способ третий

Отличается от двух предыдущих тем, что класс flex задан блоку div, а не картинке.

.flex <
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
>

А что будет, если после тега img, всем трем блокам добавить текст?

<img src="https://myrusakov.ru/support.png" alt="">
<h2>Ольга Смирнова</h2>
<p>Консультант по кредитам</p>

У первых двух способов, параграфы с текстом окажутся наверху, несмотря на то, что в HTML-коде, они стоят после изображения. Для перемещения текста под картинку, потребуется обернуть теги img, h2 и p в ещё один блок div и прописать ему свойство text-align: center.

Выравнивание блока внутри блока.

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

Выравнивание блока внутри блока.

Заключение

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Добавить комментарий

Ваш адрес email не будет опубликован.