CSS 垂直居中 - 寸寸君(2)_H5之家 - 中国HTML5教程资源分享第一站

a. table标签
使用插入 table(包括tbody、tr、td)标签

<body> <table><tbody><tr><td> <div> <div>看我是否可以居中。</div> <div>看我是否可以居中。</div> <div>看我是否可以居中。</div> </div> </td></tr></tbody></table> </body> css代码： table td{height:300px;background:#ccc;padding:0;}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。虽然我显示设值了padding为0，但是根据图片来看，td的content是紧包着子元素的，剩下的用padding来填充，所以视觉上是垂直居中的效果。无论里面包含的是文本还是图片。

b. display:table-cell + vertical-align:middle
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。注意和新增table标签不一样的是一定要设置vertical-align。（给父亲设不是给自己）

<div> <div> <p>看我是否可以居中。</p> <img src=""/> </div> </div> <style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>

感谢评论区的朋友，提供了一种新的思路。但是有一点错误，我后面会指正出来，不管怎么还是谢谢你！
前面提到的都是css的传统布局方法，垂直居中实现起来确实什么麻烦。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
关于flex布局的基础知识我就不一一列举了，菜鸟教程这一节讲的什么清晰，大家可以自行学习。

4.CSS3的flex弹性盒子布局法

让我带着大家来逐步尝试，首先给父元素设置display：flex，并设置按照主轴的排列方式即水平方向从左到右依次排列row,如果你想要垂直居中的子元素只有一行可以设置nowrap。如果你想要好几行元素作为整体一起居中的话就可以设置wrap。flex布局真的很神奇很方便！

#container{ width:600px; border:2px solid blue; display:flex; flex-flow: row nowrap; } <div> <span>aaaaaaaaaaaa我我我</span> <img src="1.jpg"/> <img src="1.jpg" /> <img src="1.jpg" /> <img src="1.jpg"/> </div>

注意：此时我仍然按照CSS里面的习惯，只对img的width设置了，没有对height设置。然而在flex布局中行不通，图片的高度不在根据宽度等比例自使用设置了，而是会填满整个父元素。

那我们给图片分别设置好高度之后，接下来，就要真正的设置垂直居中了！
注意justify-content:center;是水平居中。而垂直居中是align-items:center;
附上完整代码：

#container{ width:600px; border:2px solid blue; height:250px; display:flex; flex-flow: row nowrap; align-items:center; } <div> <span>aaaaaaaaaaaa我我我</span> <img src="1.jpg"/> <img src="1.jpg"/> <img src="1.jpg"/> <img src="1.jpg"/> </div>

完美！！！
有同学可能会产生疑问，如果子元素是块状元素怎么办？
flex布局很强大，无论子元素是块状还是行内统统都排排坐在一行，谁也不能独占一行。进了flex的门，一生都是flex的魂！！！
flex还有很多其他好玩的属性，大家可以自己去练练手，十分有趣！！

posted @