Как центрировать элемент "позиция: абсолютный" в IE 9,10,11

Как центрировать элемент "position: absolute" в IE 9, 10, 11, мой пример не работает в Internet Explorer. Также эта "позиция: абсолютная, левая: 50%, margin-left: -20px;", манера меня не устраивает, так как макет реагирует.

.box{
    position: absolute;
    top: 150px;
    right: 0;   
    left: 0;
    margin: auto;       
}

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>

Ответы

Ответ 1

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>

CSS

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;   //specify all including bottom:0
    margin: auto;
    height:200px;
    width:200px;       
}

DEMO

Ответ 2

Просто дайте ему фиксированную ширину и высоту и удалите верх: 150px

Ответ 3

Здесь отлично работает Jsfiddle

.box{
position: absolute;
top: 150px;
right: 0;   
left: 0;
margin: auto;   
border: 2px solid red;    
width: 50px;
height: 50px;
}

Ответ 4

Я просто боролся с этим сам, и конкретный ключ для меня менял свойство max-width как свойство width. Добавление max-width не нарушает его, но оно полагается на свойство width в IE, по-видимому, где в Firefox он работал только с максимальным набором.

Я надеюсь, что это поможет кому-то еще!

Ответ 5

Вам не нужно устанавливать свойство bottom (даже в IE), чтобы центрировать этот элемент по горизонтали.

Однако, если вы хотите вертикально центрировать элемент, вам понадобится нижнее свойство в сочетании с автоматической маркой сверху и снизу.

Если ваш элемент будет располагаться только горизонтально, а "bottom" установлен на 0, то в вашем коде есть что-то противоречащее, заставляющее вас использовать это свойство. Я видел это раньше в Bootstraps Ecosystem, не применяя правильную иерархию контейнера → строка и т.д.