文档章节

常见的垂直居中布局方式

ali安东尼
 ali安东尼
发布于 2017/07/05 14:39
字数 343
阅读 2
收藏 0

上一篇介绍了水平居中的方法,在这一篇我们将介绍垂直居中的方法。 display:table-cell与vertical-align: middle 无论元素是行内元素,还是块元素,均可以通过设置display:table-cell;和vertical-align: middle,则可实现元素居中。若元素是行内元素,那么就在其自身里面设置这两个特性;若元素是块元素,那么就在其父元素里面设置。

flex弹性布局 上一篇介绍怎么使用flex实现元素的水平居中布局,类似地,也可以使用flex实现垂直居中布局。设置如下:

.son{ display: flex;
align-items:Center; } 如果需要同时实现水平以及垂直的居中,则在样式里面同时设置justify-content:center;和align-items:Center;。

除了以上的方法,还可以通过flex与margin的结合实现,具体设置如下:

.parent{ display: flex; text-align: center; height:100px; background:red; }

.parent span{ margin:auto; } 绝对定位position 使用绝对定位的方式也能实现垂直居中,设置如下:

div{ width: 50%; height: 50%; background: red; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
} 通过margin:auto和top,left,right,bottom都设置为0实现居中。不过这里得确定内部元素的高度,可以用百分比。

由睿江云提供,想了解更多,请登陆www.eflycloud.com

© 著作权归作者所有

共有 人打赏支持
ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
私信 提问
由 Bootstrap 的媒体对象(Media object) 谈 flexbox

CSS3 弹性盒子(flexbox),是一种新的布局方式。使用 flexbox,可以很方便的实现常见的布局以及居中效果。Bootstrap v4 的 Media object 也是使用 flexbox 来实现。flexbox 相关的属性较多,本...

2017/12/18
0
0
CSS布局总结

显示方式 元素的display显示方式有多种,隐藏,块级,内联,内联-块级 1、隐藏 display:none使得被选择的元素隐藏,并且不占用原来的位置。 2、块级 display:block; 表示块级元素块级元素会...

小衰哥有点帅
2017/09/24
7
0
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
16
0
如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直...

文文1
2015/09/21
25.5K
0
Android五布局——线性布局LinearLayout

1、线性布局: 在res->layout->activity_main.xml文件中,如果有LinearLayout控件,其中可添加控件,则这些控件的布局就是线性布局。 2、LinearLayout: LinnearLayout是线性布局控件,它包含...

落叶-归根
2016/07/19
10
0

没有更多内容

加载失败,请刷新页面

加载更多

docker搞个wordpress

1.先把wordpress的镜像下载下来 docker pull wordpress 2.下载mysql docker pull mysql:lastest 3.启动mysql docker run --name blog -e root -d mysql:5.7 docker run --name some-mysql -e......

无极之岚
6分钟前
0
0
【宇润日常疯测-005】PHP 中的 clone 和 new 性能比较

clone和new本不应该放在一起比较,它们的作用是不同的。但可能有一些场景下,可以用clone也可以用new,那么这时候我们选哪个呢? 我编写了两个测试,第一个是声明一个空类,第二个是带构造方...

宇润
6分钟前
0
1
点击按钮弹出类似IOS 底部 dialog

implementation 'com.baoyz.actionsheet:library:1.1.7' 然后设置按钮点击监听,,调用下列代码即可 ActionSheet.createBuilder(this, getSupportFragmentManager()) ......

lanyu96
10分钟前
1
0
专访阿里云专有云马劲,一个理性的理想主义者

“我的故事都是和团队技术相关的,自己还真没有什么引人入胜的故事。”当马劲被问到能不能多分享些个人经历故事时他笑着说,我们就干脆怀着好奇聊了聊他和阿里云专有云一路走来的故事。 马劲...

阿里云官方博客
41分钟前
1
0
java环形缓冲区

import java.util.ArrayList;import java.util.List;/** * * 环形缓冲区<br/> * 一. 写数据:<br/> * 1. push: 当数据已写满时返回false,否则可以正常写入返回true<br/>......

whoisliang
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部