<!doctype html>
<html>
<head>
<style type="text/css">
#test{
border:1px solid black;
}
#sub{
position: relative;
width: 200px;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="test">
<div id="sub">asljkkdfjkasdf</div>
</div>
</body>
</html>这个简单的页面在firefox,chrome下并没有出现预想的效果,而在一向被我摒弃的IE上面,居然。。好吧,这个是的对相对定位的理解错误呢还是firefox, chrome的bug?
<html>
<head>
<style type="text/css">
#test{
border:1px solid black;
}
#sub{
position: relative;
width: 200px;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="test">
<div id="sub">asljkkdfjkasdf</div>
</div>
</body>
</html>这个简单的页面在firefox,chrome下并没有出现预想的效果,而在一向被我摒弃的IE上面,居然。。好吧,这个是的对相对定位的理解错误呢还是firefox, chrome的bug?
你如果是想要把它固定在最中间可以这么做,在加载页面的时候执行个js方法
把div的做间距设置为浏览器当前的宽度减去div宽度的一半上下的话 就把上间距 设置为浏览器当前的高度减去div高的一半这样就能固定在最中间。。
建议在position为relative时,top不用百分比,而用数值
目前我想到的办法是IE6,7用相对定位+绝对定位来解决,而其他浏览器用display: table来解决。不知有没更简便的解决方案?
<html>
<head>
<style type="text/css">
#test{
border:1px solid black;
}
#sub{
position: absolute;
width: 200px;
top: 50%;
left: 50%;
margin:-100 0 0 -100;
text-align:center;
}
</style>
</head>
<body>
<div id="test">
<div id="sub">asljkkdfjkasdf</div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#test{
border: 1px solid black;
height: 300px;
}
#sub{
position: relative;
display : inline-block;
width: 200px;
left: 50%;
top : 50%;
margin-left:-100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="test">
<div id="sub">asljkkdfjkasdf</div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
#test{
border: 1px solid black;
height: 300px;
}
#sub{
position: relative;
width: 200px;
left: 50%;
top : 50%;
margin-left:-100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="test">
<div id="sub">asljkkdfjkasdf</div>
</div>
</body>
</html>