flex布局实现水平垂直居中

把容器设置为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>

效果如下:

发布了180 篇原创文章 · 获赞 16 · 访问量 10万+

猜你喜欢

转载自blog.csdn.net/liubangbo/article/details/104089178