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

Posted 2021-05-11

/*С помощью transform*/
.box {
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

/*С помощью flex (Вариант 1)*/
.container {
	display: flex;
}
.box {
	margin: auto;
}

/*С помощью flex (Вариант 2)*/
.container {
	display: flex;
	justify-content: center; /*если элемент 1 и промежутков нет*/
	justify-content: space-around; /*если элементов несколько и нужно распределить отступы между ними*/
	align-items: center;
}

/*С помощью flex*/
.img-div { /*Родитель тега img*/
	width: 100%;
	height: 241px;
	display: flex;
	align-items: center;
	justify-content: center;
}

<div class="container">
	<div class="box"></div>
</div>