position:absolute;时如何居中
我们习惯用margin:0,auto;居中元素,但有时我们必须要让元素获得position:absolute;,这时候,再用margin:0,auto;居中是无效的。
举个例子
<!DOCTYPE html>
<html>
<head>
<title>wheel</title>
<style type="text/css" >
#sample{
width: 900px;
height: 600px;
position: absolute;
margin: 0,auto;
background: #A5A5A5;
}
</style>
</head>
<body id="body">
<div id="sample">
</div>
</body>
</html>
在这里,虽然css有margin: 0,auto;,显示效果如下图所示,没有居中
2
我们需要把代码改为
<!DOCTYPE html>
<html>
<head>
<title>wheel</title>
<style type="text/css" >
#sample{
width: 900px;
height: 600px;
position: absolute;
left: 50%;
margin-left: -450px;
background: #A5A5A5;
}
</style>
</head>
<body id="body">
<div id="sample">
</div>
</body>
</html>
在这里我们做了两个改动,就是加了
left: 50%;
margin-left: -450px;
为什么这么改呢,left是在position属性是absolute或fixed时才有效的, left: 50%;意思距离左边是界面的百分之五十,这是div的左边边界正好在画面的中间线,这是我们再左移图片的一半长度的距离,就可移使图片中间与画面中间重叠
而且在缩放时,仍保持居中。
方法一:(不能微调)
position:absolute;
left:0; right:0; top:0; bottom:0;
margin:auto;
方法二:(可微调)
position:absolute;
top:50%; left:50%;
margin-top:-100px;(元素高度的一半)
margin-left:-100px;(元素宽度的一半)
以上转自网络