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

作者 : 枫瑞博客 本文共757个字,预计阅读时间需要2分钟 发布时间: 2019-02-22 共3.62K人阅读

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

常见问题FAQ

枫瑞你想努力吗?
不 ,我只想找富婆

4 评论

  1. 滴滴滴 ❗

  2. 🙂 测试

  3. ❗ 膜拜大佬

  4. 膜拜大佬

发表评论