首页 » web前端 » 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 文字水平居中 垂直居中

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《Flex布局 CSS控制DIV 文字水平居中 垂直居中》 发布于2019-02-22

赞(0) 生成海报

评论 4

7 + 1 =
  1. #0

    滴滴滴 :!:

    2年前 (2019-03-15)
  2. #0

    :smile: 测试

    管理员枫瑞博客2年前 (2019-03-14)
  3. #0

    :!: 膜拜大佬

    2年前 (2019-03-14)
  4. #0

    膜拜大佬

    2年前 (2019-03-14)

长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....