Подтвердить что ты не робот

CSS - Как центрировать Абсолютное положение div с максимальной шириной в IE9,10,11

Мне нужно центрировать абсолютное положение div, которое имеет максимальную ширину.

Вот пример. http://jsfiddle.net/allegrissimo123/3VHuK/1/

.mess{
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    background: #212121;
    color: #FFFFFF;
    margin-bottom: 50px;    
    max-width: 350px;       
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    z-index: 1000;
}

Я тестирую это в IE9,10,11, но он не работает.

4b9b3361

Ответ 1

Назначьте width для класса.

.mess{
text-align: center;
display: inline-block;
margin: 0 auto;
background: #212121;
color: #FFFFFF;
margin-bottom: 50px;    
max-width: 350px;       
position: absolute;
top: 40px;
left: 0px;
right: 0px;
z-index: 1000;
width:100%; /* add this */
}

DEMO

Ответ 2

Кроме того, протестирован в IE8:

.mess{
   text-align: center;
   display: inline-block;
   margin: 0 auto;
   background: #212121;
   color: #FFFFFF;
   margin-bottom: 50px; 
   max-width: 350px;        
   position: absolute; 
   top: 50%; 
   left: 50%; 
   -webkit-transform:translate(-50%,-50%);
   -ms-transform:translate(-50%,-50%);
   transform:translate(-50%,-50%);
   z-index: 1000;
}

Ответ 3

Это положит ваш div в центр (по вертикали и по горизонтали). В этом случае вам не нужно предоставлять маржу. Приведенный ниже код может применяться к любому div независимо от его ширины. Убедитесь, что родительский div должен иметь позицию: относительную или абсолютную или фиксированную;.

    .mess{
     /*your other properties here*/
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform: translate(-50%, -50%);
    }

Ответ 4

Попробуйте обновить css. Это приведет к выравниванию абсолютного div по вертикали и по горизонтали.

CSS

.mess{
max-width: 350px;
max-height: 100px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom:0px;
margin:auto;

}

DEMO