flex布局实现水平垂直居中

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-21 09:35   66   0

把容器设置为flex布局,justify-content属性可以实现水平居中,align-items属性可以实现垂直居中。通过一个简单例子一看就明白了。

<html>
 
<head>
<style type="text/css">

#app{
    width: 600px;
    height: 600px;
    outline: red dotted 3px;   
    display: flex;
    justify-content: center;
    align-items: center;
}
#content{
    width: 200px;
    height: 200px;
    background-color: green;
}
</style>
</head>
 
<body>

    <div id="app">
        <div id="content"></div>
    </div>
    
<script>
    
</script>
</body>
</html>

效果如下:

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP