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

Примеры, как поместить элемент в центр родителя с помощью absolute, flexbox и grid layout.

<div class="container">
	<div class="element">Centered content</div>
</div>
HTML

Абсолютный блок c фиксированной шириной и высотой центруется сам, если ему задать margin: auto и top, bottom, left, right равные нулю.

.container{
	position: relative;
	height: 350px;
}
.element{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 400px;
	height: 210px;
}
CSS

Блок отцентруется по горизонтали и вертикали если ему задать margin: auto, а у родителя display: flex.

.container{
	display: flex;
	height: 350px;
}
.element{
	margin: auto;
}
CSS

Элемент находится внутри grid-контейнера и выравнивается свойствами justify-self и align-self.

.container{
	display: grid;
}
.element{
	justify-self: center;
	align-self: center;
}
CSS
11.10.2019, обновлено 04.03.2021
11016

Комментарии

, чтобы добавить комментарий.

Другие публикации

Адаптивное выравнивание изображений на всю ширину браузера
Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.
5892
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
21991
+25
Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
8787
+2
Текст в две колонки
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
22104
+1
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
68390
+22
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
39832
+25