使用CSS 3垂直对齐
有了CSS 3，有什么方法可以垂直对齐块元素吗？ 你有一个例子吗？ 谢谢。
最近在看这个问题，并试图：
HTML：
<body>
<div id="my-div"></div>
</body>
CSS：
#my-div {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
这是小提琴：
http://jsfiddle.net/sTcp9/6/
它甚至可以在使用“宽度/高度：自动”时使用，而不是固定的尺寸。 测试Firefox，Chrome和IE（* gasp *）的最新版本。
注意：本示例使用灵活框布局模块的草稿版本。 它已被不兼容的现代规范所取代。
通过将box-align和box-pack属性一起使用，将div盒的子元素居中。
例：
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
使用Flexbox：
.container {
display: flex;
/* Vertical align: */
align-items: center;
/* Horizontal align: */
justify-content: center;
}
jsFiddle：http://jsfiddle.net/maars/8Uyvf
浏览器支持：http://caniuse.com/flexbox（一些浏览器需要前缀）
链接地址: http://www.djcxy.com/p/41483.html