垂直居中对齐CSS代码

浏览数：20 / 时间：2015年06月09日

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

.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前端开发技术，分享网页相关资源。
---------------------------------------------------------------

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

垂直居中对齐CSS代码