Очень часто возникает необходимость расположить div по центру экрана или другого div’a но не всегда удается достичь желаемого результата, а иногда не совсем понятно почему тот или иной способ не работает.

В данной статье рассмотрим некоторые способы задания положения div’a по центу с помощью таких приемов, как position, flexbox и grid.

Расположение по центру с помощью свойства position

Рассмотрим два способа расположить div по центру с применением свойства position. Для начала задаем родительскому диву position: relative. Для дочернего элемента указываем следующие свойства: position: absolute и другие:

.parentDiv {
    position: relative;
}

// 1 способ
.childDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 2 способ
.childDiv {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

Оба представленных способа имеют одинаковый эффект, выбор остается лишь за вами.

Расположение по центру с помощью flexbox

Самый простой и распростаненный способ отцентрировать див с помощью flexbox — задать родительскому элементу следующие свойства:

.parentDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

Задав эти свойста родительскому элементу, все дочерние элементы находящиеся внутри него примут центральное положение.

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

.parentDiv {
    display: flex;
    justify-content: center;
}

.childDiv {
    align-self: center;
}

Этот способ похож на тот, который был описан выше с небольшим отличием. Свойство align-self: center следует указать тому элементу, который необходимо отцентровать. Это установит флекс-элемент по центру контейнера.

Еще один способ расположить отдельный div в центре родительского, указать дочернему элементу свойтво margin: auto.

.parentDiv {
    display: flex;
}

.childDiv {
    margin: auto;
}

Центрирование с помощью grid

По аналогии с первым способом, рассмотренным во втором пункте, можно заменить свойство display: flex на display: grid.

// display: flex
.parentDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

// display: grid
.parentDiv {
    display: grid;
    justify-content: center;
    align-items: center;
}

Свойство grid так же, как и flex позволяет отцентровать элемент внутри родительского div’a. Для этого родительскому элементу необходимо задать свойство display: grid, а дочернему указать расположение по вертикали и горизонтали center.

.parentDiv {
    display: grid;
}

.childDiv {
    align-self: center;
    justify-content: center;
}

Еще одним способом выравнивания по центру, является place-items: center. Place-items: center выравниет все элементы по оси строки и по оси столбца. Однако, если родительский элемент не является grid-контейнером, то свойство place-items не окажет на него никакого влияния.

.parentDiv {
    display: grid;
    place-items: center;
}

Данный атрибут необходимо указать на родителе, и все элементы внутри него будут расположены по центру.

Теперь вы знаете каким способом можно отцентровать div 🙂 И помните: keep calm and write code

Читайте также:

• Практика JavaScript
• Модель OSI