Flex布局 CSS控制DIV 文字水平居中 垂直居中
我们在写静态的时候玩玩会用到文字居中,图片居中。最简单的通过标签<center></center>控制某个元素居中,或者使用CSS样式text-align: center;。但是当元素position后这些方式都会失效。简单介绍另外几种方式;
方式一:display:table
改方式称为表格模拟法,把DIV设置为display:table,再将子元素设置为display:table-cell;vertical-align:middle;但枫瑞不是很喜欢这个方式,我给大家介绍几个难一点的
方式二:padding
内边距属性也可以使用也简单,但是在自适应上,所有不是很推选。
推选方式:line-height
行高属性要设置固定的长宽,px等。但是%后无法使用:做一个测试,div宽高都为100px,我们只要设置line-height高度和height相同即可,overflow:hidden;防止溢出
.fengrui{height:100px;width:100px:line-height:100px;overflow:hidden;}
推选方式:Flex布局
Flex布局好处就是可以决解position和设置div宽高百分比后无法居中问题,看样式,其中align-items: center水平居中,justify-content: center;垂直居中:Flex布局 CSS控制DIV 文字水平居中 垂直居中
.lan-l-rwgz-1-l{ width: 50%; height: 100%; border: chocolate 1px solid; align-items: center; justify-content: center; display: flex; overflow: hidden;}
评论列表(4条)
滴滴滴 :!:
:smile: 测试
:!: 膜拜大佬
膜拜大佬