DIV元素垂直居中的分析与实现

首先,对于需要垂直居中的元素常规居中处理

margin: 0 auto;

　　接下来要设置div的祖先元素的宽高为100%， 在默认的设置中他们都为0；

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

接下来设置该元素的posion值为relative,不让它脱离文档流,

加入基本的背景色方便方便,下载的基本情况如图:

接下来设置

top:50%;
margin-top: 自身高度的一半；

当然了这一步也可以用css3的平移特性：加入属性

transform：translate Y（-50%）；

 

当然了，如果兼容性的要求不高的话，也可以完全使用css3的基于flex布局方式布局：

html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}