使用弹性布局（display：flex）实现元素的水平居中和垂直居中_display: 居中

作者：花生_TL007 | 2024-06-11 10:17:14

踩

display: 居中

为了方便理解我附上具体一点的例子

HTML片段：


<div class="box">
    <p>弹性布局实现元素居中</p>
</div

CSS片段：

❀水平居中


.box{
    display: flex;
    justify-content:center;
    }

❀垂直居中


.box{
    display: flex;
    width: 500px;
    height: 20rem;
    align-items: center;
    }

❀水平垂直居中


.box{
    display: flex;
    width: 500px;
    height: 20rem;
    align-items: center;
    justify-content:center;
    }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/702756