网页布局实现之div垂直居中

1.实现一个div上下左右居中的几种方式。

实现div水平居中很容易，给div一个宽度值，然后左右margin值为auto就可以实现，比较难实现的是div的垂直居中。

（1）利用position绝对定位。

代码示例：

#div{width:300px;height:200px;position:absolute; top:50%;left:50%;margin-top:-150px;margin-left:-100px;}

#parent_div{position:reletive;}

解释：设置top，left值，参考点是div左上角的点，所以设置top，left之后，还要考虑离正中心的偏移位置，此时可以用负的margin值来实现。

（2）flex 弹性布局

代码示例：#parent_div{display:flex;}

#div{margin:auto;}

两个属性就可以实现了，代码简洁了不少，实现的效果却是一样的。（看了一下，关于flex的知识点需要单独列出来作为一篇文章。）