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

最新推荐文章于 2024-07-19 14:29:49 发布

dilei8887

最新推荐文章于 2024-07-19 14:29:49 发布

阅读量1.1k

点赞数

原文链接：http://www.cnblogs.com/pengfei25/p/10319564.html

版权

方法一： 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-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>