Как расположить div по центру css

CSS — Выравнивание по центру

Александр Мальцев

В CSS некоторые на первый взгляд простые вещи оказывается не так-то просто выполнить. Одной из таких вещей, является выравнивание, т.е. когда один элемент необходимо расположить определённым образом относительного другого.

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

Примечание: под каждым решением приведен список браузеров с указанием версий, в которых указанный CSS код работает.

CSS - Выравнивание по центру

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

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

Браузеры, которые поддерживают данное решение:

  • Chrome 4.0+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

CSS — Выравнивание по горизонтали

1. Выравнивание одного блочного элемента ( display: block ) относительно другого (в котором он расположен) по горизонтали:

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 6.0+
  • Opera 3.5+
  • Safari 1.0+

2. Выравнивание строчного ( display: inline ) или строчно-блочного ( display: inline-block ) элемента по горизонтали:

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

CSS — Выравнивание по вертикали

1. Отцентровать один элемент ( display: inline , display: inline-block ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

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

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opera 7.5+
  • Safari 1.0+

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

Как расположить div по центру css

Способов выравнивания блоков довольно много. Каждый выбирает для себя более привычный. Я опишу 5 способов, выбирайте наиболее подходящий.

scrin5

scrin1

  1. Самый простой способ – с использованием стиля margin:10px auto 5px;
    Его можно применять для выравнивания одного блока. Два и более блока в этом случае будут располагаться вертикально.

    стиль:
    .blk1 < /* выравнивание блоков по центру */
    margin:10px auto 5px;

/* эти стили на выравнивание не влияют */
width: 400px;
background-color:#CCC;
border: 1px solid #999;
padding: 20px;
>

Код HTML-смтраницы:

<div > Содержание блока 1. Текст, текст, … </div>
<div > Содержание блока 2. Текст, текст, … </div>

  1. Процентный способ выравнивания. Его использовать можно тогда, когда ширина блока задана в процентах. Принцип в том, что если ширина блока 60%, то на отступы слева и справа остается 40% (по 20% с каждой стороны). В этом случае можно для этих блоков применять стиль:

margin:5px 20% 10px 20%;

scrin2

width:60%;
Код страницы аналогичен предыдущему способу.

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

  1. Смешанный способ выравнивания блока по центру: left: 50%;
    margin-left: -500px;
    position: absolute;
    Это не самый лучший, т.к. имеет ряд недостатков:
  1. выравнивание получается не совсем по центру;
  2. при использовании двух и более блоков на странице виден только последний, т.к. стиль position: absolute; (абсолютное позиционирование) ставит все блоки в одно место.

scrin3

  1. С использованием родительского блока. Метод предполагает использование одного дополнительного общего блока, внутри которого помещаются выравниваемые блоки.
    В этом случае HTML-код страницы:

<div >
<div > Содержание блока 1. Текст, текст… </div>
<div > Содержание блока 2. Текст, текст… </div>
… ниже дополнительные блоки (при необходимости) …
<div > Содержание блока 3. Текст, текст… </div>
<div > Содержание блока 4. Текст, текст… </div>
<div > Содержание блока 5. Текст, текст… </div>

</div
>

Стили для этих блоков:

.dop-block <
position: relative;
float: right;
right: 50%;
>
.blk4 <
position: relative;
float: left;
left: 50%;

/* эти стили на выравнивание не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;
>

scrin4

Если блоков в странице не много, т.е. они помещаются в одну строку, то выравнивание для них работает:

scrin4 2

Главный недостаток — когда блоков много и они не помещаются в 1 ряд, то выравнивание блоков по центру перестает работать:

  1. С использованием стиля text-align: center; в родительском блоке и стиля display: inline-block; в дочерних. Тогда HTML-код страницы:

<div >
<div > Содержание
блока 1. Текст, текст… </div>
<div > Содержание блока 2. Текст, текст… </div>
… ниже дополнительные блоки (при необходимости) …
<div > Содержание блока 3. Текст, текст… </div>
<div > Содержание блока 4. Текст, текст… </div>
<div > Содержание блока 5. Текст, текст… </div>
</div>
Стили для этих блоков:

.dop-block <
text-align: center;
>

.blk5 <
display: inline-block;

/* дополнительный стиль для вытавнивания текста внутри блока */

text-align:left;

/* эти стили на выравнивание блоков не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;

Страница в этом варианте будет выравнивать блоки даже если их общая длинна превышает ширину окна браузера:

scrin5

Не все способы описаны. Если вы считаете, что есть еще более удобный способ, напишите.

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

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

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

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

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

Вариант 5. Flexbox.

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

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

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

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

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