Выравнивание блока по центру CSS

CSS - Выравнивание элементов

Селектор:

table; div; image; #name

Свойство:

margin; float; text-align; display; align-items; justify-content;

Значения:

left; right; center; flex-start; flex-end;

Выравнивание элементов — одна из ключевых задач в веб-дизайне. Например, размещение блока <div> по центру экрана используется для создания аккуратного и структурированного интерфейса. Рассмотрим основные методы выравнивания с помощью CSS.

Выравнивание элементов с использованием CSS

Базовый HTML

Для примеров создадим простой блок div:

<div class="block">Пример блока</div>

Центрирование по горизонтали (свойство margin)

Самый популярный способ выравнивания блока по центру экрана — использование свойства margin с автоматическими значениями:

.block {
    margin: 0 auto;
    width: 400px;
    border: 1px solid blue;
}

Результат:

Текст, картинка, ссылка или другие элементы страницы

Выравнивание по краям (свойство float)

Для выравнивания блока к левому или правому краю страницы используется свойство float:

.block {
    float: right;
    width: 400px;
    border: 1px solid blue;
}

Результат:

Текст, картинка, ссылка или другие элементы страницы

Центрирование текста (свойство text-align)

Для выравнивания текста внутри блока применяется свойство text-align:

.block {
    text-align: center;
    width: 400px;
    border: 1px solid blue;
}

Результат:

Текст, картинка, ссылка или другие элементы страницы

Использование Flexbox для выравнивания

Flexbox — современный и гибкий инструмент для выравнивания элементов. Чтобы выровнять блок по центру (по вертикали и горизонтали), используем:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    border: 1px solid black;
}
.block {
    width: 200px;
    height: 100px;
    background-color: lightblue;
}

HTML:

<div class="container">
<div class="block">Пример блока</div>
</div>

Результат:

Пример блока

Выравнивание через Grid

Ещё один способ центрирования элемента — использование CSS Grid. Пример:

.container {
    display: grid;
    place-items: center;
    height: 100vh;
    border: 1px solid black;
}
.block {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
}

HTML:

<div class="container">
<div class="block">Пример блока</div>
</div>

Результат:

Пример блока

Примечания

• Используйте Flexbox или Grid для современного и удобного выравнивания элементов.
• Свойства float и text-align чаще применяются для поддержки старых браузеров или специфических задач.
• Обсудить способы выравнивания можно на странице обсуждения.