垂直居中对齐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前端开发技术，分享网页相关资源。

---------------------------------------------------------------