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

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

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:flex]: 看我是否居中了

没了?对,就这么简单。

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/

点赞 (2)
  1. 云库网说道:
    Firefox 40.0 Firefox 40.0 Windows 7 x64 Edition Windows 7 x64 Edition

    这里有一篇关于居中的文章《CSS3 Flexbox轻松实现元素的水平居中和垂直居中》可以作为这里的补充说明!http://yunkus.com/article/css3/286.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据