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

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

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

Абсолютный блок 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
2

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

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

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

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

Комментарии 1

Lerwing M Lerwing M
29 июля 2022 в 20:08
блин я тупой :)))) два часа гонял резиновый блок, спасибо, скинул копеечку на радости.

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

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

Адаптивное выравнивание изображений на всю ширину браузера
Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.
14659
-2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43170
+34
Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
20347
+2
Текст в две колонки
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
77058
+3
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
127965
+36
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
65118
+33