竖向居中需要一个父元素和一个子元素合作完成。

<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竖向居中的更多相关文章

  1. 三行代码CSS竖向居中

    .element{ position:relative; top:50%; transform:translateY(-50%); } 这里无需设置高度或者父元素的position属性.(IE9可用) ...

  2. 通过vertical-align属性实现“竖向居中”显示

    自学编程大概有大半年的时间了,从15年7月开始学习使用人数最多的JAVA,到后来喜欢上了前端,但由于之间在建筑设计院的工作加班颇为频繁,每天刨去工作,基本没有多少自己个人的时间,只能每天6,7点起床, ...

  3. 理解vertical-align或“如何竖向居中”<转>

    在各种技术论坛里经常会有这样的问题提出,“我如何能将这个东西竖向居中?”这个问题通常会跟随着这样一句话,“我使用了 vertical-align:middle,但是不管用! ” 这个问题其实有三个层面 ...

  4. CSS中居中的完全指南(中英对照翻译)

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  5. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  6. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  7. CSS标签居中

    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...

  8. css常用居中

    对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...

  9. 如何使用Flexbox和CSS Grid,实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

随机推荐

  1. Asp.Net MVC 路由 【转】

    原文链接:http://www.asp.net/learn/mvc/ 在这篇教程中,我将为你介绍每个ASP.NET MVC应用程序都具有的一个重要功能,称作ASP.NET路由(ASP.NET Rout ...

  2. streams 日差管理及监控

    第一部分 stream环境的日常管理 1.capture进程管理 --capture进程信息 SET LINESIZE 200 COLUMN CAPTURE_NAME HEADING 'Capture ...

  3. orcale 循环插入 测试数据

    以前开发一直用的是sql server   定义临时变量 循环插入数据到表中已经成为一种固定的模式,本来想orcale应该也一样吧 都是数据库.. 结果被现实无情的打击到了.在网上找办法,求大神 最后 ...

  4. IOS中的内存不足警告处理(译)

    由于在IOS中虚拟内存系统不会采用页置换的方式来获取请求内存,取而代之的是它通过移除应用程序中的强引用来释放一些内存资源,我们知道强引用在IOS中表示拥有关系,只要有至少一个变量拥有这个对象,那么对象 ...

  5. popViewControllerAnimated 后,对页面内UITableView 内数据刷新

    popViewControllerAnimated后,这时它不执行viewDidLoad,所以不能及时对viewControler及时刷新,此时对该页面进行操作可以调用viewWillAppear:( ...

  6. SQLite的简单应用

    安装部署 1)进入 SQL 下载页面:http://www.sqlite.org/download.html 2)下载预编译二进制文件包. Windows 环境的如下: 下载完之后,就算部署完成.(P ...

  7. (转)Hessian(C#)介绍及使用说明

    什么是Hessian? Hessian是Caucho开发的一种二进制Web Service协议.支持目前所有流行的开发平台. Hessia能干什么? hessian用来实现web服务. Hessia有 ...

  8. Javascript中的函数

    Javascript中的函数 1.什么是函数 函数是被命名的,独立的,完成特定功能的代码段.其可能给调用它的程序返回值,我们把这个代码段就称之为"函数". 被命名的:函数大部分都是 ...

  9. will VS be going to

    1.Future - Will vs. Going to 2."Will be doing" vs. "will do" 3.Simple Future

  10. JAVA中的代理技术(静态代理和动态代理)

    最近看书,有两个地方提到了动态代理,一是在Head First中的代理模式,二是Spring AOP中的AOP.所以有必要补充一下动态代理的相关知识. Spring采用JDK动态代理和CGLib动态代 ...