css样式中position:absolute和position:relative水平居中

标签：

首先我们要了解样式中的这两种定位；

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;

}

css样式中position:absolute和position:relative水平居中

标签：

原文地址：http://www.cnblogs.com/tomtang/p/4451218.html