Центр div как по горизонтали, так и по вертикали с использованием абсолютного положения

Question

Я следил за инструкциями, чтобы сделать div центром как по вертикали, так и по горизонтали, но он не работает.

http://jsfiddle.net/ony80a5d/

<div class="c">center</div> 

html, body { 
    height: 100%; 
} 
.c { 
    background: grey; 
    width: 50%; 
    height: 50%; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
} 

Answer 1

Одним из вариантов было бы добавить margin: auto к элементу. В современных браузерах это будет центрировать элемент горизонтально/вертикально.

Дополнительные подходы к центрированию элемента по горизонтали/вертикали см. В разделе this answer.

Updated Example

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.c { 
 
    background: grey; 
 
    width: 50%; 
 
    height: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto 
 
}

<div class="c">center</div>

Answer 2

Вы настроили свой элемент, чтобы быть шириной 50%, но вы не установили никаких позиционировании других, то нулевых значений для верхнего/левого и т.д. набора ваш верхний и левый до 50% и преобразуйте положение, например:

.c { 
    background: grey; 
    width: 50%; 
    height: 50%; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 3

Вы не указали поля в любом месте своего кода. Просто поставьте это margin:auto в свой .c класс. Для примера http://jsfiddle.net/ony80a5d/4/

Answer 4

, если ваша ширина и высота 50%, то почему бы вам не использовать

left:25%; 
top: 25%;