利用flex布局实现垂直水平居中，非常方便

最新推荐文章于 2023-02-14 22:13:05 发布

原创最新推荐文章于 2023-02-14 22:13:05 发布 · 496 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了使用Flex布局实现元素的水平和垂直居中的方法，替代了传统的margin和定位技巧，使得布局更加灵活且响应式。

没有flex布局的时候：

水平居中是利用 margin: 0 auto;

垂直居中是利用margin-left和margin-top取负值，值为你所要居中的div的宽高。

但是有了flex布局，嘿嘿嘿：

.box {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            flex-wrap: wrap;  /*当一个内部div宽度超过外部div宽度的时候，下一个div换行显示*/
     }

对外层div做如上配置即可，然后这个div内部的div便可以按照水平垂直居中排布。