实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

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>

实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)

相关推荐