Есть несколько способов выравнивания двух блоков по центру с использованием CSS, но я расскажу о двух наиболее распространенных методах.
1. Использование flexbox:
Flexbox - это CSS-модуль, который предоставляет гибкий способ управления расположением элементов в контейнере. Для выравнивания двух блоков по центру с использованием flexbox, вам потребуется следующий код:
HTML:
<div class="container"> <div class="block1">Блок 1</div> <div class="block2">Блок 2</div> </div>
CSS:
.container { display: flex; justify-content: center; /* Выравнивание блоков по горизонтали */ align-items: center; /* Выравнивание блоков по вертикали */ } .block1, .block2 { /* Стили блоков */ }
2. Использование CSS Grid:
CSS Grid - это новая техника разметки, которая предоставляет более мощные возможности для управления расположением элементов на веб-странице. Для выравнивания двух блоков по центру с использованием CSS Grid, вам потребуется следующий код:
HTML:
<div class="container"> <div class="block1">Блок 1</div> <div class="block2">Блок 2</div> </div>
CSS:
.container { display: grid; place-items: center; /* Выравнивание блоков по центру */ } .block1, .block2 { /* Стили блоков */ }
Оба этих подхода позволяют выравнивать блоки по центру как по горизонтали, так и по вертикали. Вы можете выбрать любой из этих методов в зависимости от предпочтений и требований вашего проекта.