CSS - 如何在IE9,10,11中使用最大宽度居中绝对位置div

I need to center absolute position div that has max-width.

我需要将具有最大宽度的绝对位置div居中。

Here is an example. http://jsfiddle.net/allegrissimo123/3VHuK/1/

这是一个例子。 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;
}

I test this in in IE9,10,11 but it does not work.

我在IE9,10,11中测试了这个,但是它不起作用。

4 个解决方案

#1

Assign width for the class.

指定类的宽度。

.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

Also, tested in IE8:

另外,在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

This will put your div in the center(Vertically and Horizontally). You don't have to provide margin in this case. The below code can be applied to any div regardless of it's width. Make sure the parent div should have position:relative or absolute or fixed;.

这会将div放在中心(垂直和水平)。在这种情况下,您不必提供保证金。以下代码可以应用于任何div,无论其宽度如何。确保父div应该具有position:relative或absolute或fixed ;.

    .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

-1

Try this updated css. This will center align an absolute div vertically and horizontally.

试试这个更新的CSS。这将垂直和水平对齐一个绝对div。

CSS

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

}

DEMO

#1