Question

我需要将具有最大宽度的绝对位置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中对此进行了测试，但它不起作用。

Answer 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

Answer 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;
}

Answer 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%);
    }

Answer 4

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

CSS

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

}

DEMO

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

4 个答案: