1.使用CSS3中的Flex布局
对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用!!!!!),除了设置display:flex之外,还有另外两个属性需要设置,分别是justify-content和align-items,他们的意思分别是水平居中和垂直居中。HTML+CSS代码如下:
body {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.parentNode {
width: 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使用才会生效
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.parentNode {
width: 400px;
height: 400px;
background: #f00;
position: relative; // 这里必须用relative 原因是 相对于 body这个父标签定位 如果用absolute会找上级的relative,如果没有,就到顶级的document
display: flex;
justify-content: center;
align-items: center;
}
.childNode {
width: 200px;
height: 200px;
background: #fff;
}
</style>
</head>
<body>
<div class="parentNode">
<div class="childNode"></div>
</div>
</body>
</html>