css绝对定位实现居中

css绝对定位和居中

今天做练手项目的时候，想居中一个div，但是就查了下资料，对absolute定位的了解又多了一些。

一下是一些个人的理解：

1. 当某个block设置为绝对定位时，如果设置他的top,left,right,bottom都为0，并且没有个它设置宽高时，浏览器会自己为这个block绘制填充满父级relative或absolute定位容器。代码并解释如下：

<!--html代码-->
<div id="outdiv">
    <div id="insidediv"></div>
</div>

/*css代码*/
#outdiv{
    position:relative;
    height:600px;
    width:1000px;
    border:1px solid green;
}
#insidediv{
    position:absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    border:1px solid red;
}

上述代码可以看到，内层的div并没有给它设置任何的宽和高，但它并不像其他没有设置宽和高的block一样，大小为0.而是和父级定位的容器一样大。

2.当某个block的position为absolute，若给定上下，或者左右的位置，浏览器便会为其重新绘制填充满父级高或者宽。代码如下：

<!--html代码-->
<div id="outdiv">
    <div id="insidediv"></div>
</div>

/*css代码*/
#outdiv{
    position:relative;
    height:600px;
    width:1000px;
    border:1px solid green;
}
#insidediv{
    position:absolute;
    top: 0;bottom: 0;
    border:1px solid red;
}

执行上述代码，会看到绿色边框的容器内，填充了一条垂直的直线，当给定左右的值时，同理会出现一条水平的直线（其实是两条重合了）。

3.当block的position为absolute时，若给定4个位置任意一个值，在额不能确定什么东西，在浏览器中的表现便是什么都没有。

总结一下，当block的position为absolute时，如果给定对立的两个位置的值，浏览器便会使该block填充满该block所在的父级容器，便能确定该block在这个方向上的大小。

居中定位：

利用上述block块性质，加上固定的block宽、高，便能很方便的实现block居中。代码如下：

  <div id="outdiv">
    <div id="insidediv"></div>
  </div>

#outdiv{
      width: 1000px;
      height: 600px;
      border: 1px solid red;
      position: absolute;
    }
    #insidediv{
      width: 600px;
      height: 400px;
      position: absolute;
      top: 0;left: 0;right: 0;bottom: 0;
      margin: auto;
      border: 1px solid green;
    }

上述实现原理：利用绝对定位(position:absulote)和四周的位置为0来填充满父级定位的容器。对于宽度和高度不够的，利用margin来补充。

上述代码中，固定了一个父级div，子div中，设置了position为absolute，并且设置了固定的width和width,此时子div的大小是小于父div。并且子div中top、left，right，bottom的值都为0，则是让子div去填充满父div，但是子div的height和width是不够的，所以如果加上margin的话，子div便能完成填充满父div的条件了。再给margin设置为auto，均匀分配，便实现了居中。同理还可以实现水平居中或者垂直居中。