<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火狐浏览器下绝对定位失效</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{position: relative; }
.wrap{
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
left: 150px;
top:150px;
display: -moz-box;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-moz-box-align: center;
-moz-box-pack: center;
}
.content{
width:100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
</html>
代码如上图:
1、display:box后通过align和pack的center,可以是元素水平垂直居中
2、对wrap加上绝对定位后,在火狐中display:box失效了,经过试验,在safari和谷歌浏览器中仍然正常
3、解决办法:在wrap和content中间在加层div,设其class为middle,div的大小是wrap的宽度和高度的100%,在wrap中绝对定位,在middle中设置display:box,则能达到content在middle居中的效果,即content在wrap水平和垂直居中的效果
更改代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火狐浏览器下绝对定位失效</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{position: relative; }
.wrap{
width: 200px;
height: 200px;
background-color: lightcoral;
position: absolute;
left: 150px;
top:150px;
}
.middle{
width: 100%;
height: 100%;
display: -moz-box;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-moz-box-align: center;
-moz-box-pack: center;
}
.content{
width:100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="middle">
<div class="content"></div>
</div>
</div>
</body>
</html>