Flex布局 CSS控制DIV 文字水平居中 垂直居中

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;}

Flex布局 CSS控制DIV 文字水平居中 垂直居中 枫瑞博客

(2)
枫瑞博客枫瑞博客
上一篇 2019-02-12 20:42
下一篇 2019-03-21 09:53

相关推荐

回复

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(4条)

  • 庚
    2019-03-15 13:34

    滴滴滴 :!:

  • 枫瑞博客
    枫瑞博客 2019-03-14 22:47

    :smile: 测试

  • 庚
    2019-03-14 22:40

    :!: 膜拜大佬

  • 庚
    2019-03-14 22:40

    膜拜大佬