定义一个需要垂直居中的div元素，他的宽度和高度均为200px，背景色为原谅色。代码如下：
div{
width: 200px;
height: 200px;
background-color: green;
}
首先通过设置margin: 0 auto实现水平居中，代码如下：
div{
width: 200px;
height: 200px;
margin:0 auto;/*水平居中*/
background-color: green;
}
效果如下：
image.png
实现垂直居中之前，先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是由内容高度填充的），并且清除默认样式，即把margin和padding设置为0.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
接下来需要div往下移动,top属性可以使元素向下偏移。但是，由于默认情况下，元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top属性改变它的垂直偏移。这就需要使用position属性，设置它的值为relative，就可以通过top、bottom、right、left等属性使它在正常的文档流中发生位置偏移（注意，此时它在并没有脱离文档流，原来的位置还会占据着的！）。代码如下:
div{
width: 200px;
height: 200px;
margin:0 auto;/*水平居中*/
position: relative;/*可在文档流中偏移*/
background-color: green;
}
刷新页面，发现没有任何变化的，因为还没开始移动div的垂直偏移。垂直偏移需要用到top属性，它的值可以是具体的像素，也可以是百分数。因为现在不知道父元素（即body）的具体高度，所以应该用百分数。既然要让它居中，就设置50%试一下：
div{
width: 200px;
height: 200px;
margin:0 auto; /*水平居中*/
position: relative; /*可在文档流中偏移*/
top: 50%;
background-color: green;
}
image.png
显然div在中间偏下半个div高度的地方，可以用margin-top:-半个div高度使其向上偏移。
div{
width: 200px;
height: 200px;
background-color: green;
margin:0 auto; /*水平居中*/
position: relative; /*可在文档流中偏移*/
top: 50%;/*偏移至父元素top50%*/
margin-top: -100px;/*向上偏移100*/
}
完成！如图所示：
image.png
除了可以使用margin-top把div往上偏移，CSS3的transform属性也可以实现，设置div的transform: translateY(-50%)，可使div向上平移（translate）自身高度的一半(50%)。代码如下：
div{
width: 200px;
height: 200px;
background-color: green;
margin:0 auto; /*水平居中*/
position: relative; /*可在文档流中偏移*/
top: 50%;/*偏移至父元素top50%*/
transform: translateY(-50%);/*向上偏移50%*/
}
使用Flex布局
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;/*定义body的元素垂直居中*/
justify-content: center;/*定义body的里的元素水平居中*/
}
div{
width: 200px;
height: 200px;
background:green;
}
