css如何利用flexbox布局实现盒子居中

小编给大家分享一下css如何利用flexbox布局实现盒子居中，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

利用flexbox布局

<style type="text/css">    .div1 {        width: 100px;        height: 100px;        border: 1px solid #000000;        display: flex;                justify-content: center;        align-items: center;    }    .div2 {        height: 40px;        width: 40px;        background-color: red;    }</style><div class="div1 ">    <div class="div2 ">    </div></div>

效果：

以上是“css如何利用flexbox布局实现盒子居中”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！