轻松实现水平垂直居中,不用css expression以及jq

在div盒子的大小确定的情况下,我们可以通过css的calc方法来实现水平垂直居中.

首先要先理解盒子模型

例如:

•   .wrap .con {
•             /*利用CSS3的calc() ，它的用法类似于函数，能够给元素设置动态的值：*/
•             /*（父级的宽度 - 自身的宽度）的一半当做padding的值*/
•             padding: -webkit-calc((100% - 100px) / 2);
•             padding: -moz-calc((100% - 100px) / 2);
•             padding: -ms-calc((100% - 100px) / 2);
•             padding: calc((100% - 100px) / 2);            
•             width: 100px;
•             height: 100px;
•             background-color: pink;
•             color: #fff;
•             /*背景只显示内容区域*/
•             background-clip: content-box;
•         }

但是如果要实现垂直方向的居中当内部盒子的高度会昌盛变化时,cala()这个方法又不能计算该div的高度,所以要实现不固定高度的垂直方向的居中这个有些不适用哈.