1.使用CSS3中的Flex布局
对于flex，我们要了解的是它是一个display的属性，而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用！！！！！)，除了设置display：flex之外，还有另外两个属性需要设置，分别是justify-content和align-items，他们的意思分别是水平居中和垂直居中。HTML+CSS代码如下：
body {
position: absolute;
100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.parentNode {
400px;
height: 400px;
background: #f00;
}
<body>
<div class="parentNode"></div>
</body>
当需求改变时，比如我们要在此div里面嵌套一个div，根据我上面提到的，要想子DIV垂直水平居中，我们也要给父DIV同样这样设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: absolute; // flex必须配合absolute使用才会生效
100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.parentNode {
400px;
height: 400px;
background: #f00;
position: relative; // 这里必须用relative 原因是 相对于 body这个父标签定位 如果用absolute会找上级的relative，如果没有，就到顶级的document
display: flex;
justify-content: center;
align-items: center;
}
.childNode {
200px;
height: 200px;
background: #fff;
}
</style>
</head>
<body>
<div class="parentNode">
<div class="childNode"></div>
</div>
</body>
</html>