CSS3弹性盒子align-items属性之center垂直居中
CSS3弹性盒子之align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
基本用法
div{
display:flex;
align-items:center;
}
div 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
完整示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3弹性盒子align-items属性之center垂直居中</title> <style> #main { margin:0 auto; text-align:center; width: 450px; height: 300px; border: 1px solid black; display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items: center; } #main div { -webkit-flex: 1; /* Safari 6.1+ */ flex: 1; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">RED</div> <div style="background-color:lightblue;">BLUE</div> <div style="background-color:lightgreen;">Green div with more content.</div> </div> <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p> <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p> </body> </html>
示例显示效果如下：查看演示
注意: Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。
注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。
