使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成。
<div class="flexbox-container">
<div>Blah blah</div>
<div>Blah blah blah blah blah ...</div>
</div>
…但为了让子元素竖向居中,你只需要对父元素施加CSS样式:
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex; -ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center; align-items: center;
}
因为上面使用了浏览器引擎前缀,所以看起来有些复杂,但实际上本质是非常简单的,也就2句代码。关于CSS竖向居中之前也说过几种方法,但使用flexbox也不失为一个非常漂亮的解决方案。我相信以后会发现Flexbox更多更有价值的用法。
另一种适合ie9+的垂直居中的方法:
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
使用Flexbox实现CSS竖向居中的更多相关文章
- 三行代码CSS竖向居中
.element{ position:relative; top:50%; transform:translateY(-50%); } 这里无需设置高度或者父元素的position属性.(IE9可用) ...
- 通过vertical-align属性实现“竖向居中”显示
自学编程大概有大半年的时间了,从15年7月开始学习使用人数最多的JAVA,到后来喜欢上了前端,但由于之间在建筑设计院的工作加班颇为频繁,每天刨去工作,基本没有多少自己个人的时间,只能每天6,7点起床, ...
- 理解vertical-align或“如何竖向居中”<转>
在各种技术论坛里经常会有这样的问题提出,“我如何能将这个东西竖向居中?”这个问题通常会跟随着这样一句话,“我使用了 vertical-align:middle,但是不管用! ” 这个问题其实有三个层面 ...
- CSS中居中的完全指南(中英对照翻译)
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- CSS标签居中
CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...
- css常用居中
对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
- 如何使用Flexbox和CSS Grid,实现高效布局
CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...
随机推荐
- Asp.Net MVC 路由 【转】
原文链接:http://www.asp.net/learn/mvc/ 在这篇教程中,我将为你介绍每个ASP.NET MVC应用程序都具有的一个重要功能,称作ASP.NET路由(ASP.NET Rout ...
- streams 日差管理及监控
第一部分 stream环境的日常管理 1.capture进程管理 --capture进程信息 SET LINESIZE 200 COLUMN CAPTURE_NAME HEADING 'Capture ...
- orcale 循环插入 测试数据
以前开发一直用的是sql server 定义临时变量 循环插入数据到表中已经成为一种固定的模式,本来想orcale应该也一样吧 都是数据库.. 结果被现实无情的打击到了.在网上找办法,求大神 最后 ...
- IOS中的内存不足警告处理(译)
由于在IOS中虚拟内存系统不会采用页置换的方式来获取请求内存,取而代之的是它通过移除应用程序中的强引用来释放一些内存资源,我们知道强引用在IOS中表示拥有关系,只要有至少一个变量拥有这个对象,那么对象 ...
- popViewControllerAnimated 后,对页面内UITableView 内数据刷新
popViewControllerAnimated后,这时它不执行viewDidLoad,所以不能及时对viewControler及时刷新,此时对该页面进行操作可以调用viewWillAppear:( ...
- SQLite的简单应用
安装部署 1)进入 SQL 下载页面:http://www.sqlite.org/download.html 2)下载预编译二进制文件包. Windows 环境的如下: 下载完之后,就算部署完成.(P ...
- (转)Hessian(C#)介绍及使用说明
什么是Hessian? Hessian是Caucho开发的一种二进制Web Service协议.支持目前所有流行的开发平台. Hessia能干什么? hessian用来实现web服务. Hessia有 ...
- Javascript中的函数
Javascript中的函数 1.什么是函数 函数是被命名的,独立的,完成特定功能的代码段.其可能给调用它的程序返回值,我们把这个代码段就称之为"函数". 被命名的:函数大部分都是 ...
- will VS be going to
1.Future - Will vs. Going to 2."Will be doing" vs. "will do" 3.Simple Future
- JAVA中的代理技术(静态代理和动态代理)
最近看书,有两个地方提到了动态代理,一是在Head First中的代理模式,二是Spring AOP中的AOP.所以有必要补充一下动态代理的相关知识. Spring采用JDK动态代理和CGLib动态代 ...