CSS使用flex布局让一个DIV在另一个DIV中实现水平居中和垂直居中


关键词

CSS DIV 居中 flex

摘要

本文使用flex布局来实际DIV在父DIV中居中显示,包括水平居中和垂直居中。

一个行内元素,如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中实现水平居中和垂直居中,本文就介绍这么多,希望对大家有所帮助!

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权


如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« 正则表达式的零宽度前置断言和后置断言 javascript数组求和函数,使用reduce实现 »