前端开发指南：水平垂直居中方案结合 flexbox 布局

最近再次遭遇了许多垂直居中的问题, 这是一个在CSS布局中非常常见的挑战, 例如包括固定宽度或半固定宽度等多种类型的容器对象, 其实都存在着多种解决方案. 随着CSS3中的flexbox功能出现后, 解决这类问题变得更为简便易行. 网络上搜索与Flexbox相关的文章发现很多资源较为简略, 因此决定在此基础上系统地整理并介绍各种垂直居中的方法与技巧.

行内元素的水平居中

通过将这些内部元素放置于相应的块级容器（如

、

或

等）中即可实现内部元素的水平对齐

1 2 3	#container{ ``text-align``:``center``; }

并且支持字符样式（如文字）、块状样式（如链接）以及基于块状或字符样式的不同组合，并且包含诸如字符样式表（如inline）、块状样式表（如inline-block）以及表格样式表（如inline-table）等不同类型的样式表，并且包括像flex布局（如inline-flex）在内的 flex相关样式支持。

[Demo](http://runjs.cn/code/fd4bc2