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

DIV по горизонтальному центру другого DIV

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

Отслеживать
задан 8 мая 2017 в 20:33
Виталий Фесюра Виталий Фесюра
805 5 5 золотых знаков 14 14 серебряных знаков 26 26 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Вот так как-то

.block < position:relative; width: 337px; height: 56px; border: 3px solid #000; text-align:center; >.wrap < display:inline-block; >.miniblock

Отслеживать
ответ дан 8 мая 2017 в 20:45
user245150 user245150

У .wrap добавляем display: table; и margin: 0 auto; Как-то так:

.block < width: 337px; height: 56px; border: 3px solid #000; >.wrap < display: table; margin: 0 auto; >.miniblock

Конечно, можно к .block добавить text-align:center; , а к .wrap добавить display:inline-block; и всё заработает как нужно. Свойство display — определяет, как элемент должен быть показан в документе, значение inline-block — расположить в ряд несколько элементов с заданными размерами. Хоть text-align и отвечает за выравнивание текста в пределах элемента, но установив его значение в center — выровняем блоки по центру.

Хорошие ссылки с полезными ответами:

• How to horizontally center a in another ?
• How can I center a div within another div?

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

18.12.2020, 10:18

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

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

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

Позиция

Используйте эти сокращенные утилиты для быстрой настройки положения элемента.

На этой странице

Значения позиции

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

div class="position-static">. div> div class="position-relative">. div> div class="position-absolute">. div> div class="position-fixed">. div> div class="position-sticky">. div>

Организация элементов

Легко располагайте элементы с помощью утилит для позиционирования краев. Формат — .

Где свойство — одно из:

• top — для вертикального верхнего положения
• start — для горизонтального левого положения (в LTR)
• bottom — для вертикального нижнего положения
• end — для горизонтального правого положения (в LTR)

Где позиция — одно из:

• 0 — для 0 крайнего положения
• 50 — для 50% крайнего положения
• 100 — для 100% крайнего положения

(Вы можете добавить больше значений позиции, добавив записи в переменную карты Sass $position-values )

div class="position-relative"> div class="position-absolute top-0 start-0">div> div class="position-absolute top-0 end-0">div> div class="position-absolute top-50 start-50">div> div class="position-absolute bottom-50 end-50">div> div class="position-absolute bottom-0 start-0">div> div class="position-absolute bottom-0 end-0">div> div>

Центрирование элементов

Кроме того, Вы также можете центрировать элементы с помощью служебного класса преобразования .translate-middle .

Этот класс применяет к элементу преобразования translateX(-50%) и translateY(-50%) , что в сочетании с утилитами позиционирования краев позволяет Вам полностью центрировать элемент.

div class="position-relative"> div class="position-absolute top-0 start-0 translate-middle">div> div class="position-absolute top-0 start-50 translate-middle">div> div class="position-absolute top-0 start-100 translate-middle">div> div class="position-absolute top-50 start-0 translate-middle">div> div class="position-absolute top-50 start-50 translate-middle">div> div class="position-absolute top-50 start-100 translate-middle">div> div class="position-absolute top-100 start-0 translate-middle">div> div class="position-absolute top-100 start-50 translate-middle">div> div class="position-absolute top-100 start-100 translate-middle">div> div>

Добавляя классы .translate-middle-x или .translate-middle-y элементы можно размещать только в горизонтальном или вертикальном направлении.

div class="position-relative"> div class="position-absolute top-0 start-0">div> div class="position-absolute top-0 start-50 translate-middle-x">div> div class="position-absolute top-0 end-0">div> div class="position-absolute top-50 start-0 translate-middle-y">div> div class="position-absolute top-50 start-50 translate-middle">div> div class="position-absolute top-50 end-0 translate-middle-y">div> div class="position-absolute bottom-0 start-0">div> div class="position-absolute bottom-0 start-50 translate-middle-x">div> div class="position-absolute bottom-0 end-0">div> div>

Примеры

Вот несколько примеров из реальной жизни этих классов:

Письма +99 непрочитанные сообщения Метка

Уведомления непрочитанные сообщения

button type="button" class="btn btn-primary position-relative"> Письма span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 span class="visually-hidden">непрочитанные сообщенияspan>span> button> button type="button" class="btn btn-dark position-relative"> Метка svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg">path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>svg> button> button type="button" class="btn btn-primary position-relative"> Уведомления span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2">span class="visually-hidden">непрочитанные сообщенияspan>span> button>

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

div class="position-relative m-4"> div class="progress" style="height: 1px;"> div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">div> div> button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1button> button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2button> button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3button> div>

Sass

Карты

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

$position-values: ( 0: 0, 50: 50%, 100: 100% ); 

Утилиты API

Утилиты положения объявлены в нашем API утилит в файле scss/_utilities.scss . Узнайте, как использовать API утилит.

 "position": ( property: position, values: static relative absolute fixed sticky ), "top": ( property: top, values: $position-values ), "bottom": ( property: bottom, values: $position-values ), "start": ( property: left, class: start, values: $position-values ), "end": ( property: right, class: end, values: $position-values ), "translate-middle": ( property: transform, class: translate-middle, values: ( null: translate(-50%, -50%), x: translateX(-50%), y: translateY(-50%), ) ), 

CSS-блок по центру другого блока: методы выравнивания элементов

Центрирование элементов на веб-странице — одна из самых распространенных задач frontend-разработчика. От правильного позиционирования блоков зависит удобство для пользователя и конверсия сайта. В статье мы разберем основные способы выравнивания блоков по центру в CSS от простых до сложных. Узнаете, какие подходы подойдут в конкретных случаях. Получите практические советы для верстки.

1. Горизонтальное центрирование блока

Горизонтальное центрирование элемента подразумевает выравнивание блока по центру контейнера слева направо. Это один из наиболее частых случаев при разработке интерфейсов. Рассмотрим основные способы горизонтального центрирования в CSS.

Способ с margin: auto

Самый простой и универсальный способ — использовать автоматические отступы слева и справа:

.block

Браузер автоматически рассчитает отступы так, чтобы блок оказался по центру. Главное — указать фиксированную ширину элемента. Подходит для блочных элементов.

С помощью Flexbox

Еще один удобный способ — использовать Flexbox:

.container

Задаем родительскому элементу display: flex, чтобы превратить его в flex-контейнер. А justify-content: center выравнивает дочерние элементы по горизонтали. Подходит для любых типов элементов.

Через inline-block + text-align

Можно применить и такой вариант:

.element < display: inline-block; >.container

Сделаем элемент inline-block, а родителю зададим выравнивание текста по центру. Инлайн-элементы выстроятся в ряд посередине контейнера.

Особенности при нескольких элементах

При центрировании сразу нескольких блоков каждый из способов будет вести себя по-разному:

• Flexbox выстраивает элементы в одну строку;
• Автоотступы помещают каждый блок на новую строку;
• Inline-block оставляет элементы в одном ряду.

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

2. Вертикальное центрирование блока

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

С помощью Flexbox

Удобный вариант — использовать Flexbox:

.container

Display: flex делает элемент flex-контейнером. А align-items: center выравнивает контент по вертикали. Высоту контейнера при этом нужно задавать явно.

Через position: absolute и transform

Еще один распространенный способ:

.container < position: relative; >.element

Используем position: absolute и сдвигаем элемент на 50% от top контейнера. Затем добавляем transform, чтобы скомпенсировать половину высоты самого элемента.

Костыльный вариант — display: table-cell

Можно применить и такой костыльный способ:

.container

Делаем из блока table-cell и задаем выравнивание по вертикали — middle. Но лучше избегать этого метода.

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

Часто нужно выровнять элемент одновременно и горизонтально, и вертикально. Рассмотрим решение такой задачи.

Способ с Flexbox

Удобно использовать Flexbox:

.container

Объединяем выравнивание по горизонтали и вертикали в одном контейнере.

Позиционирование + transform

Можно скомбинировать position и transform:

.container < position: relative; >.element

Блок смещаем на 50% от обоих осей и убираем сдвиг с помощью transform.

Использование CSS Grid

Еще вариант — применить CSS Grid:

.container < display: grid; >.element

Делаем контейнер grid-ом и задаем элементу автоматические отступы. Тоже удобный подход.

4. Примеры центрирования разных элементов

Рассмотрим примеры центрирования для разных типов элементов.

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

Для выравнивания текста удобно использовать свойства:

.text < text-align: center; /* горизонтально */ height: 100px; /* высота блока */ line-height: 100px; /* высота строки */ >

Text-align выравнивает текст по горизонтали, а line-height — по вертикали.

Заголовок, список, форма по центру

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

• Флексбоксы
• Позиционирование
• Текстовое выравнивание (кроме списков)

Главное помнить про особенности каждого метода.

Блок по центру страницы

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

body

Применяем стили к тегу body. Теперь любой блок внутри будет отцентрирован.

Картинки и кнопки по центру

Для изображений и кнопок те же подходы. Особенность — при выравнивании автоотступами нужно добавить свойство display: block.

.image

Также во Flexbox изображения могут необычно растягиваться. Этого можно избежать, задав элементу width и height.

5. Ошибки при центрировании в CSS

Рассмотрим типичные ошибки при позиционировании элементов.

Растягивание изображений во Flexbox

Без заданных размеров картинки во Flexbox могут растягиваться на всю высоту контейнера. Чтобы избежать этого, нужно указывать width и height.

Некорректные отступы у текста

При position: absolute текст может смещаться из-за отступов. Либо обнуляем их, либо задаем стили напрямую тегу p или div.

Проблема с position: absolute

Элемент с position: absolute выходит из потока документа. Из-за этого могут возникнуть проблемы с размерами и положением блоков.

Неверное использование text-align

Ошибка — применение text-align к блочным элементам вроде div. Это свойство работает только с текстом и инлайн-элементами.

6. Советы по центрированию элементов

Дадим несколько полезных советов по центрированию.

• Подбирайте подход в зависимости от задачи;
• Учитывайте кроссбраузерную поддержку методов;
• Margin: auto — универсальный способ для большинства случаев;
• Используйте инструменты отладки в браузере.

Главное — практика и изучение реальных примеров. Со временем выработается интуиция, какой способ оптимален в той или иной ситуации. Успехов в веб-верстке!