Выделим центр div

В этом посте я покажу вам три различных метода центрирования содержимого div, как профессионал.

Методами центрирования < div > являются:

1. положение: абсолютное;
2. дисплей: flex;
3. отображение: сетка;

положение: абсолютное…?

Свойство CSS ‘position’ определяет, как элемент позиционируется в DOM. В нашем распоряжении имеются следующие объекты недвижимости:

верх, право, низ, лево

Эти свойства задают конечное положение элементов. Существует несколько типов позиций, наиболее распространенными являются.

статический, относительный, абсолютный, липкий

Center < div > с позицией: absolute;

    div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50, -50);
        }

Дисплей: флекс…?

С самого начала, display flex является частью FlexBox, это «новый» набор свойств HTML5, он позволяет нам компоновать наши веб-проекты более простым и интуитивно понятным способом (это мое любимое свойство). FlexBox работает как элемент-контейнер (flex container), который упорядочивает и позиционирует все содержащиеся в нем элементы в соответствии с инструкциями.

Выравнивание по центру < div > с display: flex;

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

Дисплей: сетка…?

В соответствии с моим пониманием того, как все работает, я могу сказать, что grid и flex — это одно и то же и имеют одну и ту же цель, но работают они по-разному. Свойства сетки также были созданы для HTML5 и работают как сетка.

Выравнивание по центру с отображением: сетка;

    div{
        display: grid;
        display: grid;  
        justify-content: center;  
        align-content: center;
        }

o

div{
    display: grid;
    place-items: center;
    {