大家好，欢迎来到IT知识分享网。

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，均匀分配，便实现了居中。同理还可以实现水平居中或者垂直居中。