Если вы хотите выровнять элемент <div> по центру по горизонтали относительно родительского элемента, вы можете использовать CSS-свойство margin со значением auto для левой и правой стороны, т. e. установить margin: 0 auto; для элемента <div>. Значение auto автоматически регулирует левое и правое поле и горизонтально выравнивает блок относительно родительского элемента <div>.
Однако это решение будет работать только тогда, когда ширина родительского элемента больше, чем содержащий элемент <div>, который вы хотите выровнять. Давайте посмотрим на пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontally Center a Div Using CSS</title>
<style>
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background: #f0e68c;
}
</style>
</head>
<body>
<div class="container">
<h1>Это заголовок</h1>
<p>Это абзац.</p>
</div>
</body>
</html>
