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

CSS - Выравнивание элемента
CSS Выравнивание элемента
Селектор:	table; div; image; #name
Свойство:	float; margin; width; border;
Значения:	left; right;
Портал Веб-разработчиков • • Портал CSS

Иногда возникает необходимость выравнивания блока <div> по центру экрана. Например, когда требуется разместить весь шаблон сайта по центру экрана. Это достаточно легко сделать, задав необходимые настройки в CSS.

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

Создаём элемент в HTML

Создадим простой элемент div:

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

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

Для выравнивания элемента по центру экрана используется следующий CSS код:

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

Получаем:

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

Также можно выравнивать элементы по правому или левому краю страницы, используя свойство "float" со значениями "left" или "right":

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

Получаем:

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

Примечания

• Для более сложного выравнивания элементов по центру можно использовать Flexbox. Об этом можно прочитать в соответствующей статье.
• Если возникли трудности или есть вопросы по CSS, вы можете задать вопрос в специально созданной теме на форуме.