Центрирование элементов CSS
CSS предлагает несколько методов центрирования, и подходящий зависит от типа элемента. Элементы можно центрировать по горизонтали, по вертикали или в обоих направлениях.
Пример
Flexbox центрирует этот элемент <div>.
Prompt
Отцентрируйте элемент div как по горизонтали, так и по вертикали внутри контейнера, используя flexbox. Контейнер должен иметь фиксированную высоту (например, 300px) и рамку. Центрированный элемент должен отображать текст "Я центрирован по вертикали и по горизонтали." Используйте justify-content: center и align-items: center.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Flexbox</title>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center with Flexbox</h2>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Горизонтальное выравнивание
Блочные элементы можно центрировать с помощью margin: auto, а текст внутри элементов — с помощью text-align: center. Для выравнивания влево или вправо есть float и position.
Вертикальное выравнивание
Современные техники вёрстки решают вертикальное центрирование несколькими способами: align-items: center во flexbox, place-items: center в grid и, когда размеры элемента неизвестны, position в сочетании с transform.
Совет: Для центрирования контента в обоих направлениях flexbox — рекомендуемый и самый современный выбор.