You are here
css样式中position:absolute和position:relative水平居中
我们习惯用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;，显示效果如下图所示，没有居中
我们需要把代码改为
<!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的左边边界正好在画面的中间线，这是我们再左移图片的一半长度的距离，就可移使图片中间与画面中间重叠
而且在缩放时，仍保持居中。
END
首先我们要了解样式中的这两种定位；
absolute（绝对定位）：将被赋予的对象从文档流中拖出，使用left，right，top，bottom等属性相对于最接近的一个最有定位设置的父级对象进行绝对定位，如果父级没有进行定位属性设置，则按照默认规则来设定（根据body左上角作为参考进行定位），同时绝对定位的对象可层叠。
relative（相对定位）：对象不可重叠，使用left，right，top，bottom等属性在正常的文档流中进行定位，其对象不可以层叠。
居中：
1，对于使用了absolute定位的对象为了达到自适应居中的效果，要设置其作用对象的宽度；例如以下代码实现的居中
.ceshi
{
position:absolute;
bottom: 10%;
display: block;
width: 250px;
left:50%;
margin-left:-125px;
}
2，对于使用了relative定位的对象达到居中的效果,因为其在正常的文档流中，所以其参考对象为其自身，可以进行如下设置：
.ceshi2
{
margin：0 auto;