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

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 文字水平居中 垂直居中 枫瑞博客

分享到 :
相关推荐

星宿UI V0.3:更新QQ小程序支持流量主以及分享功能 首页加载逻辑

以前啊,一直搞不明白,为什么互相喜欢的两个人,它不能一直走下去。现在我知道了呀。原来...

星宿UI V0.2:微信开源小程序细节优化和交互判断更新

你看到了我眼里的沙丘河流,也看到了我眼里的星辰黄昏,你可曾看到我心里,嘘在那里,你一...

利用flex布局横向滚动制作滑动选项卡以及内容滑块

利用flex布局横向滚动首先介绍一下什么是flex布局,为啥喜欢用flex布局呢,[...

星宿UI V0.1-微信小程序:wordprss开源小程序支持激励视频流量主

看清了很多人,却不能随意拆穿;讨厌着很多人,却又不能轻易翻脸。有时候,生活就是要逼自...

发表评论

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

评论(4)

  • 游客 03/15/2019

    滴滴滴 ❗

  • 枫瑞博客 普通用户 03/14/2019

    🙂 测试

  • 游客 03/14/2019

    ❗ 膜拜大佬

  • 游客 03/14/2019

    膜拜大佬