垂直置中對齊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前端開發技術，分享網頁相關資源。
---------------------------------------------------------------