垂直居中对齐CSS代码

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

.elment{    position:relative;    top:50%;    transform:translateY(-50%);}

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

html

<div class="outer">    <div class="inner">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;}

案例效果，参见codepen。

---------------------------------------------------------------
前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------