Выравнивание элементов с помощью CSS

Всем привет. 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;
}