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

编程入门行业动态更新时间:2024-10-15 10:12:14

没有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便可以按照水平垂直居中排布。

更多推荐

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

本文发布于:2023-06-13 12:16:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1381931.html