Расположение блока по центру страницы css

Как выровнять блок по центру — полное руководство по центрированию DIV-элемента

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

Простое центрирование DIV-элемента на странице

Этот метод будет отлично работать во всех браузерах.

Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .

Центрируем DIV внутри DIV-элемента старым способом

Этот метод div выравнивания по центру будет работать во всех браузерах.

Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина ( width ).

Центрируем DIV внутри DIV-элемента с помощью inline-block

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

Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока ( inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .

Центрируем DIV внутри DIV-элемента горизонтально и вертикально

Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.

У внутреннего div-элемента должна быть указана ширина ( width ) и высота ( height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.

Центрируем DIV по нижней границе страницы

Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.

У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .

Центрируем DIV на странице вертикально и горизонтально

Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.

У div-элемента должна быть установлена ширина ( width ) и высота ( height ).

Делаем адаптивное центрирование DIV-элемента на странице

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

У центрированного div-элемента должно быть установлено свойство max-width .

Центрируем DIV внутри элемента с помощью свойств внутреннего блока

Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.

У внутреннего div должно быть установлено свойство max-width .

Центрируем два адаптивных div-элемента рядом друг с другом

Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.

.container < text-align: center; >.left-div < display: inline-block; max-width: 300px; vertical-align: top; >.right-div < display: inline-block; max-width: 150px; >screen and (max-width: 600px) < .left-div, .right-div < lef max-width: 100%; >>

Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.

DIV-элемент, центрированный при помощи Flexbox

Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Валентин Сейидов автор-переводчик статьи « THE COMPLETE GUIDE TO CENTERING A DIV »

Источник

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

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

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

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

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

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

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

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

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

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

Вариант 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) модели. На практике использовать не рекомендую.

Бонус

Используя идею 4-го варианта, можно задавать внешние отступы для блока, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/ugnp8ry7.

Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя.
Пример: jsfiddle.net/serdidg/Lhpa1s70.
Пример с большой картинкой: jsfiddle.net/serdidg/tor2yudn.

Источник

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

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

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

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

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

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

.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

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

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

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

.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; /* ширина и высота 2 блока */ width: 500px; height: 250px; /* Значения определяются в зависимости от его размера */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; }

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

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

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

.parent { position: relative; } .child { position: absolute; /* ширина и высота 2 блока в % */ height: 50%; width: 50%; /* Значения определяются в зависимости от его размера в % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ }

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

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

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

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

.block { margin-left: auto; margin-right: auto; }

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

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

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

.parent { text-align: center; } .child { 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 .

.parent { line-height: 500px; } .child { display: inline-block; vertical-align: middle; }

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

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

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

.parent { display: table; } .child { display: table-cell; vertical-align: middle; }

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

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

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

Комментарии: 10

Возникла у меня тут задачка, казалось-бы простая — сделать кастомный нумерованный список, с большими цифрами-буллетами, и примыкающим к ним многострочными item’ами, отцентрованными по вертикали относительно буллетов.
Ну дизайнер так надизайнил, а че — красиво ведь…

Вобщем все известные трюки не сработали, и в результате родил новый.
На флексах.

А вдруг, кому-либо пригодится…
А может, кто-нибудь более грамотный что-либо оптимизирует… 😉

Источник