CSS-центрирование дает разные результаты

Question

Рассмотрим этот код для центрирования div относительно его родительского элемента:

div {
width:200px;
position:absolute;
left:50%;
margin-left:-110px;
padding:10px;
display:table;
}

Мы используем (ширина / 2) - отступы, верно?

Почему все браузеры, основанные на Webkit (Safari и Chrome), центрируют этот div в 10px намного левее? Эти 10px - отступы.

Итак, у нас есть два фронта:

1. Chrome + Safari -> отступы не должны быть включены для правильного центрирования
2. Firefox, IE, Opera -> отступы должны не быть включены для правильного центрирования

Теперь мой вопрос: кто из них на самом деле делает это правильно?

EDIT:

Apperantly; проблема возникает только при добавлении display: table; в див. Сделал пример: http://jsfiddle.net/rhKW7/1/ текст ссылки

Answer 1

В зависимости от вашей реализации вы можете содержать элемент, который должен быть центрирован по div, ширина которого 100% и он абсолютно позиционирован, а затем с текущим элементом, который вы используете, используйте поле margin: 0 auto, чтобы центрировать его внутри абсолютно позиционированного элемента. элемент.

Answer 2

Я не могу воссоздать вашу проблему. Ваш код работает во всех браузерах.

Демо: http://jsfiddle.net/SXzbF/1/

Редактировать: Я понял, в чем проблема:

В Chrome (по крайней мере), если вы установите display:table, то в результате заполнение этого элемента не используется. Я полагаю, это потому, что для элементов TABLE заполнение устанавливается только для элемента TD (для ячеек), а не для элемента TABLE. Я не уверен, что установка отступов на TABLE действительна, но я рекомендую вам не делать этого, а вместо этого установить отступы для ячеек.

Answer 3

Вы делаете это неправильно. Вы должны использовать

margin: 0 auto;

Это будет центр элемента в его родителя.