87,917
社区成员
发帖
与我相关
我的任务
分享
<!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?<!doctype 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>
<!doctype 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;
}
#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>