垂直居中对齐的核心代码如下：

.elment{

position:relative;

top:50%;

transform:translateY(-50%);

}

具体参见如下案例，利用less将居中对齐的代码携程mixins。

html

<div>

<div>vertical align anything with less<div>

</div>

css

.verticalAlign{

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.outer{

width:400px;

height:200px;

border:1px solid #000;

margin:10px;

text-align:center;

}

.inner{

.verticalAlign;

}