在我们常用的布局中，经常会出现一个布局就是：居中，左右居中，并且上下居中。看到这里，您也许已经对每一种布局，都有自己的认识了，但是在上下居中的布局中，如何才能更好的实现上下的自适应布局呢？即，需要居中显示的元素高度是不定的，这里不讨论具体有哪些方案可以解决这个问题，但是可以给出一个纯CSS解决的方案。

基本

该解决方案的使用到的CSS3的属性flex和flex-flow，但是呢，我这里也不会细致的来对这两个属性进行说明，所以，如果您对它们不太熟悉，那么建议您去先看一下它们的基本使用说明。

结构

在接下来的示例中，我都会使用以下的基本结构：

11

11

其中，.box元素，是区域元素，内部的元素会在该元素内部进行上下居中。.center元素是需要居中的元素，而.prev,.next元素在这里，是用于辅助的元素，其内部不包含任何东西。

后面的不同的布局，都是使用的该格式。

center元素上下居中

.box{

display:-webkit-flex;

display:flex;

-webkit-flex-flow : column nowrap;

flex-flow : column nowrap;

height:400px;

background-color:#eee;

}

.prev,.next{

-webkit-flex:1 1 0px;

flex:1 1 0px;

background-color:#bbb;

}

.center{

background-color:#ccc;

margin-left : auto;

margin-right : auto;

width : 100px;

}

看手机端支持：

center元素上下不同比例

假设元素，离头部和底部的比例是1:2，那么在上述的基础上，可以如下的更改即可：

.prev{

-webkit-flex:1 2 0px;

flex:1 2 0px;

background-color:#bbb;

}

.next{

-webkit-flex:2 1 0px;

flex:2 1 0px;

background-color:#bbb;

}

看手机端支持：

align-items属性实现元素的上下居中

前面的实现方式，虽然可以更好的控制上下留空的比例，但最是缺添加了两个空的DIV做为辅助标签，如果我们只是单纯的上下居中的话，那么有一个align-items属性，能更简洁的实现该布局。并且，她的HTML结构也更简单，代码如下：

11

11

CSS的实现：

body{margin:0px;padding:0px;}

.box{

display:-webkit-flex;

display:flex;

height:100px;

background-color:#eee;

-webkit-align-items:center;

align-items:center;

}

.center{

margin:0px auto;

background-color:#aaa;

width:50px;

height:50px;

}

看手机端支持：

align-self属性实现元素的上下居中

上面完了，这里还有另外一个属性，也可以实现和align-items相同的功能，只要对它的CSS进行一些简单的修改，CSS样式如下，示例请自行测试：

body{margin:0px;padding:0px;}

.box{

display:-webkit-flex;

display:flex;

height:100px;

background-color:#eee;

}

.center{

margin:0px auto;

background-color:#aaa;

width:50px;

height:50px;

-webkit-align-self: center;

align-self: center;

}

总结

flex属性在移动端的支持已经很好了，如果是使用的chrome，那么基本可以不用考虑兼容性的问题，不过在Andriod4.4之前的默认浏览器，好像支持性不太好，这个我就没有测试了，理论上，只要能支持flex属性的浏览器，该方法都可以很好的表现的。

所以，如果您发现，某些机器的某些浏览器，使用该方法无法实现自适应上下居中，那么请测试该浏览器是否支持flex的情况，也请指教，谢谢！