我需要将具有最大宽度的绝对位置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中测试了这个,但是它不起作用。
为班级分配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 */
}
另外,在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;
}
这将把你的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%);
}
试试这个更新的CSS。这将垂直和水平对齐绝对div。
CSS
.mess{
max-width: 350px;
max-height: 100px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom:0px;
margin:auto;
}