Всем привет. C вами Corvax. Давайти немного поговорим о выравнивание блоков с помощью css. Часто в практике клиентского разработчики при верстке странице нужно выровнять див по центру как по горизонтали, так и по вертикале. Здесь я соберу пару полезных примеров этой задачи. Поехали.
Пример выравнивания картинки(img) объявленную инлайново в верстке.
img {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
}
Пример выравнивания картинки (img) по центру.
html {
width:100%;
height:100%;
background:url(../img.jpg) center center no-repeat;
}
Пример выравнивания с помощью Flexbox
Пример 1 (стили для родителя)
.wrapper_flex{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
Пример 2
div.horizontal {
display: flex;
justify-content: center;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
}
Комментарии: