html图片上下居中的源代码,纯CSS实现元素的自适应上下居中

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