Вирівнювання по горизонталі та вертикалі (Flex, Grid, Position)

by Сергій Куліков

HTML

<div class="container1">
	<div class="content">FLEX text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>



<div class="container2">
	<div class="content">GRID text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>



<div class="container3">
	<div class="content">POSITION text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
</div>



<style>
.container1,
.container2,
.container3 {
	min-height: 200px;
	width: 300px;
	background-color: blue;
	margin: 20px
}

.content {
	width: 30%;
	background-color: red;
}



.container1 {
	display: inline-flex;

	/* Вирівняти по вертикалі */
	align-items: center;

	/* Вирівняти по горизонталі */
	justify-content: center;
}



.container2 {
	display: inline-grid;

	/* Вирівняти по вертикалі та горизонталі одночасно */
	/* place-items: center; */

	/* Або окремо вирівняти по вертикалі */
	align-items: center;

	/* Або окремо вирівняти по горизонталі */
	justify-items: center;
}



.container3 {
	position: relative;
}

	.container3 .content {
		position: absolute;
		top: 50%;
		left: 50%;

		/* Центрування елемента */
		transform: translate(-50%, -50%);
	}
</style>