CSS3 Flex 弹性盒模型与文本内容居中

共计 1132 个字符，预计需要花费 3 分钟才能阅读完成。

实现文本水平和垂直居中的方法有很多，但都是通过各种技巧来实现，优劣点都会存在。

CSS3 Flex 弹性盒模型在 IE11 及其他现代浏览器中已广泛支持，其丰富的功能和繁多的属性定义，使得入门起来有点抽象难懂。

这里只通过示例简单介绍使用 CSS3 Flex 弹性盒布局方式，实现文本居中的方法。

CSS 核心代码：

display: flex;
align-items: center;
justify-content: center;

对于有的浏览器（版本），以上代码或许还需要添加其特有的前缀（如 -webkit-, -ms- 等），这一点你应该了解。

示例如下：

<style type="text/css">
.flex-center{
	width: 400px;
	height: 200px;
	margin: auto;
	background: rgba(255,255,0,.3);
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
 
<div class="flex-center">
	[display:flex]: 看我是否居中了
</div>

没了？对，就这么简单。

display 伸缩盒布局的取值

box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）

如果你想详细的了解和学习 CSS 实现文本居中的方法，可以参考这里：

http://blog.csdn.net/freshlover/article/details/11579669

如果你对 css3 flex 还不太了解，可以前往如下地址进行简单的入门：

http://lzw.me/pages/css3/properties/flex/
http://www.w3.org/html/ig/zh/css-flex-1/
http://www.w3.org/TR/css3-flexbox/