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 属性支持该属性。