一个行内元素,如span、a、b、i、u这些,要设置它们居中很容易。
水平居中:text-align: center;
垂直居中:vertical-align: middle;
还有一个设置垂直居中的办法是,设置line-height值与父元素的高度一致。当然,这个只对单行有效。
接下来说说块级元素。要使一个块级元素居中,如div,直接在父元素上设置:text-align: center,是不行的!设置margin-left: auto; margin-right: auto,则可以实现水平居中。但没有很好的办法来实现垂直居中。
自从有了flex之后,我们就有了新的办法,可以flex-direction: column,然后设置justify-content: center;来实现垂直居中。当然还需要水平居中怎么办?再加一条:align-items: center;
来看一下完整的代码:
.bg-flex-c{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
关于CSS让一个DIV在另一个DIV中实现水平居中和垂直居中,本文就介绍这么多,希望对大家有所帮助!
要饭二维码
洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权
本文属于“洪哥笔记”原创文章,转载请注明来源地址:CSS使用flex布局让一个DIV在另一个DIV中实现水平居中和垂直居中:http://www.splaybow.com/post/css-div-center-578.html
如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D!
发布时间:2021/7/1 7:38:41 | 编辑:洪哥 | 分类:DHTML | 浏览: