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

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

成都创新互联公司专业为企业提供武邑网站建设、武邑做网站、武邑网站设计、武邑网站制作等企业网站建设、网页设计与制作、武邑企业网站模板建站服务,10余年武邑做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

利用flexbox布局


    .div1 {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
        display: flex;
        /*!*flex-direction: column;*!可写可不写*/
        justify-content: center;
        align-items: center;
    }

    .div2 {
        height: 40px;
        width: 40px;
        background-color: red;
    }


    
    

效果:

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

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


文章名称:css如何利用flexbox布局实现盒子居中
文章网址:http://cdiso.cn/article/iigjgo.html

其他资讯