使用flex布局解决百分比高度元素垂直居中

方法一： align-self（解决父元素下面单个子元素布局方式）

父级加上

　div{display：flex}

子元素

span {
  flex-grow: 1;
  align-self: center;
}

这种方法仅仅适应于外层元素中只包含一个子元素，或者子元素是独占一行的，因为这个时候对子元素进行设置宽度是无效的,设置了 flex-grow: 1；会是如下的效果

如果想设置一个div水平垂直都居中那么只需要将flex-grow去掉，加上宽度并设置margin:auto即可，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazyload</title>
    <style>
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%
        }
        #pictures{
            display:flex;
            width:100%;
            height:100%
        }
        #pictures>span{
            width:200px;
            height:200px;
            border:1px solid red;
            flex-grow:1;
            align-self:center
        }
    </style>
    
</head>
<body>
    <div id="pictures">
        <span></span>
    </div>
</body>
</html>

效果

注意：align-self 只能是对子元素起作用，父元素设置了display:flex后，对指定的子元素设置的时候可以用到 align-self

例如有多个子元素，我就想让其中的一个进行居上，这个时候就可以对指定的元素设置 align-self设置flex-start

align-self属性值：

align-self: auto | flex-start | flex-end | center | baseline | stretch;

方法二：align-items

父级元素加上

display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }
        .content1,.content2 {
            width: 300px;
            height: 300px;   
        }
        .content1{
            background: orange;  
        }
        .content2{
            background:pink;
        }
    </style>
</head>
<body>
    <div class="content1"></div>
    <div class="content2"></div>
</body>
</html>

效果：