Комментарии: Как отцентровать абсолютно спозиционированный элемент с использованием CSS

Автор: rezolvent

rezolvent — Mon, 11 May 2015 14:14:53 +0000

Если у родительского элемента позиционирование относительное, фиксированное или абсолютное, а у дочернего известны высота и ширина, то для центрирования можно ещё указать, left,right,top,bottom равными 0 и поставить margin: auto;

#outer{

position: relative;

width: 40%;

height: 120px;

margin: 20px auto;

border: 2px solid #c00;

}

#inner{

position: absolute;

width: 100px;

height: 100px;

background-color: #00c;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

codepen.io/rezolvent/pen/GJoXKY

Автор: vvzakharov

vvzakharov — Mon, 11 May 2015 08:12:07 +0000

Позиционирование без "position:absolute; " по вертикали и горизонтали.

body{height:100%;margin:0px;}

#body{

position: relative;

width: 100%;

height: 100%;

display:table;

}

#outer{

display:table-cell;

vertical-align:middle;

border: 2px solid #c00;

text-align:center;

}

#inner{

text-align:left;

background-color: #00c;

display:inline-block;

vertical-align:middle;

}

Абсолютное позиционирование:

body{height:100%;margin:0px;}

#body{

position: relative;

width: 100%;

height: 100%;

}

#outer{

position:absolute;

top:50%;

left:50%;

-webkit-transform: translate (-50%, -50%);

-moz-transform: translate (-50%, -50%);

-ms-transform: translate (-50%, -50%);

-o-transform: translate (-50%, -50%);

transform: translate (-50%, -50%);

}

Автор: Сергей

Сергей — Sat, 09 May 2015 23:25:56 +0000

А ещё достаточно просто написать transform: translate (-50%, 0%); и вообще не париться по поводу «половины блока».