Как центрировать блок по горизонтали css
Перейти к содержимому

Как центрировать блок по горизонтали css

  • автор:

5 способов горизонтального выравнивание блоков по центру

5 способов горизонтального выравнивание блоков по центру

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

// CSS код родительского блока
.wrap max-width: 400px;
margin: 50px auto;
border: 3px solid black;
min-height: 100px;
>

// CSS код дочернего блока
.block width: 100px;
height: 100px;
margin: 5px;
background: blueviolet;
>

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

5 способов горизонтального выравнивание блоков по центру.

Я знаю по меньшей мере 5 способов горизонтального выравнивания блоков по центру.

1) Свойство text-align (используется, но реже)

Добавим класс center со свойством text-align: center к родительскому блоку и отобразим дочерний блок, как inline-block.

.center text-align: center;
>

.block .
display: inline-block;
>

5 способов горизонтального выравнивание блоков по центру.

2) Свойство margin: auto (актуальное)

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

3) Свойство position: absolute (устаревшее)

Когда к дочернему блоку применяется position: absolute, то оно перестает влиять на родителя. Поэтому для родителя мы задаем position: relative, чтобы позиционироваться от него. А ребенку задается position: absolute, смещаем его на 50% влево и задаем отступ на половину его ширины. Не рекомендую использовать этот способ, так как он противоречит принципу независимого переиспользования блоков.

.relative position: relative;
>

.absolute position: absolute;
left: 50%;
transform: translate (-50%, 0); /* альтернатива margin-left: -50px; */
>

4) Свойство flexbox (популярное)

Flexbox — самый простой и современный способ горизонтального выравнивания по центру. Для родителя добавляются два флексовых свойства.

5) Свойство grid (современное)

Еще один современный способ выравнивания — это grid. Добавляем родителю всего два grid свойства, а вложенному блоку — три grid свойства.

.grid-parent display: grid;
grid-template-areas: «a»;
>

.grid-child grid-area: a;
justify-self: center;
>

Создано 04.11.2020 10:53:02

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

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

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

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

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

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

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

    romas_s 04.11.2020 18:14:39

    Добрый день, бы ло бы интересно почитать статью как выровнять блоки по высоте.

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

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Все способы вертикального выравнивания в CSS

    image

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

    Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

    Сравним следующие подходы. Выравнивание с помощью:

    • таблицы,
    • отступов,
    • line-height ,
    • растягивания,
    • отрицательного margin ,
    • transform ,
    • псевдоэлемента,
    • flexbox .

    image

    Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .

    Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

    Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .

    Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

    Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

    .outer < width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; >.inner

    После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
    http://jsfiddle.net/c1bgfffq/

    Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки ( inline-block ) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

    Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

    Выравнивание с помощью таблицы

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

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

    Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

    .outer-wrapper < display: table; >.outer

    Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

    Выравнивание с помощью отступов

    Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (Houter – Hinner) / 2.

    .outer < height: 200px; >.inner

    Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.

    Выравнивание с помощью line-height

    Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

    .outer < height: 200px; line-height: 200px; >.inner

    Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

    .outer < height: 200px; line-height: 200px; >.inner

    Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

    Выравнивание с помощью «растягивания»

    Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.

    Для этого нужно:

    1. задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
    2. добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
    3. установить значение auto для вертикальных отступов внутреннего блока.
    .outer < position: relative; >.inner

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

    Минус данного способа — должна быть известна высота внутреннего блока.

    Выравнивание с помощью отрицательного margin-top

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

    Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top : -Hinner / 2.

    .outer < position: relative; >.inner

    Минус данного способа — должна быть известна высота внутреннего блока.

    Выравнивание с помощью transform

    Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .

    .outer < position: relative; >.inner

    Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

    Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.

    Выравнивание с помощью псевдоэлемента

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

    Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

    Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .

    .outer:before < display: inline-block; height: 100%; vertical-align: middle; content: ""; >.inner

    Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

    Выравнивание с помощью Flexbox

    Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.

    Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?

    .outer < display: flex; width: 200px; height: 200px; >.inner

    Минус данного способа − Flexbox поддерживается только современными браузерами.

    Какой способ выбрать?

    Нужно исходить из постановки задачи:

    • Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
    • Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
    • Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
    • Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .

    Центрирование фиксированного div по горизонтали в CSS

    Чтобы сделать горизонтальное центрирование для фиксированного div, примените в совокупности свойства position: fixed , left: 50% и transform: translateX(-50%) . Этот CSS-код обеспечит точное позиционирование элемента по центру:

    Скопировать код

    .fixed-center

    Примените этот стиль к div для его центрирования:

    Скопировать код

    Многообразие методов центрирования

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

    Метод 1: Центрирование на всю ширину с автоматическими отступами

    Вы можете расположить фиксированный div на переднем плане, используя следующий CSS:

    Скопировать код

    .full-width-center

    Свойство margin: auto позволяет произвести «магическое» выравнивание элемента горизонтально.

    Метод 2: Центрирование с отрицательным маржином

    Этот метод применяется уже довольно долго:

    Скопировать код

    .fixed-neg-margin

    Простой и надёжный способ, ставший в своё время классикой, наравне с легендарными рок-группами.

    Метод 3: Адаптивное центрирование с максимальной шириной

    Ограничьте div в размерах, чтобы он не занимал излишнего места:

    Скопировать код

    .responsive-center

    Такие стили обеспечат чуткое и с уважением к пространству центрирование.

    Визуализация

    Воспринимайте фиксированный div как картину Моны Лизы:

    Выравнивание блока div по центру (по горизонтали). margin:auto.

    Пожалуй, самым простым и легким способом выровнять блок div по центру является использование свойства margin со значением margin-left:auto и margin-right:auto.

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

    Больше моих уроков по HTML, CSS и верстке сайтов здесь.

    Посмотрите, как это может выглядеть:

     
    Содержимое блока

    Как вы понимаете, условие margin-left:auto и margin-right:auto можно записать сокращенно:

    margin:auto;
    margin:10px auto;

    (получаем отсуп в 10 пикселей сверху и снизу и auto слева и справа).

    Все это работает до тех пор, пока у блока задана ширина, если вы ее уберете, выравнивание сразу пропадет.

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

    Больше моих уроков по HTML, CSS и верстке сайтов здесь.

    Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *