div水平垂直居中

在写前端页面时，常常需要居中一个块级元素，如div的居中。水平居中只需margin:auto;一行代码即可，那么，如何才能使得div在父块级元素中同时水平、垂直居中呢？

开始之前，大家应该充分理解css中绝对定位和相对定位的概念

这篇博文写得非常好：CSS相对定位和绝对定位详解

在此补充一下，当div使用绝对定位时（position:absolute），会往上查找祖先元素，直到某个祖先元素有position属性且值为relative或position，然后以祖先元素的左上角为基点，再设置top，right，bottom，left属性。具体解释可查看上面链接。

看下简陋的最终效果：

 

实现思路

1.使用绝对定位，相对对位功能，使得子div左上角的点位于父div的中心

2.使用transform属性使子div向左上角编译长宽一半的距离

 

实现代码及注释