Flexbox
Горизонтальное центрирование

Пример #1-2

1) Центрирование блока без Flexbox
width: 100%;
margin: 0 auto;

2) Центрирование блока без Flexbox
width: 80%;
margin: 0 auto;

 

3) Центрирование одного блока c Flexbox
display: flex;
justify-content: center;

 

Подмосковные вечера

Музыка: В. Соловьёва-Седова
Слова: М. Матусовского

Не слышны в саду даже шорохи,
Все здесь замерло до утра.
Если б знали вы, как мне дороги
Подмосковные вечера.

Речка движется и не движется,
Вся из лунного серебра.
Песня слышится и не слышится
В эти тихие вечера.

 

4) Центрирование 4-х блоков
display: flex;
justify-content: center;
flex-wrap: wrap;
Lorem ipsum dolor sit amet.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed eius omnis hic voluptatem repellat tenetur modi eveniet ab excepturi perferendis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, repellat.
Lorem ipsum dolor sit amet.

 

◄ Вернуться к Примеру