Как разместить блок по центру css

Question

Вячеслав Межуревский · Accepted Answer

Вариантов отцентрировать блок с помощью CSS существует несколько. Рассмотрим их: Вариант №1. Для корректной работы этого варианта необходимо задать ширину центрируемого блока. ```html

Данные должны быть по центру

``` ```css .center-block { /* устанавливаем внешние отступы сверху и снизу в 0, а левый и правый - автоматический. */ margin: 0 auto; /* Для наглядности зададим блоку фон и изменим цвет текста*/ background-color: #38d9a9; color: #fff; /* задаем ширину блока*/ width: 200px; } ``` Вариант №2. Здесь мы используем flexbox. Для корректной работы для цитируемого элемента необходимо создать контейнер-обертку. ```html

Данные должны быть по центру

``` ```css .container { display: flex; justify-content: center; } .center-block { /* Для наглядности зададим блоку фон и изменим цвет текста*/ background-color: #38d9a9; color: #fff; width: 200px; } ``` Вариант №3. Тут мы применим абсолютное позиционирование и свойство translate. При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров ```html

все буквы в этом параграфе станут заглавные

``` ```css .container { background-color: #bac8ff; height: 100vh; } .center-block { background-color: #38d9a9; color: #fff; width: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } ```

Как разместить блок по центру css

Ответы

Каталог