Очень часто возникает необходимость расположить 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
Читайте также: