垂直居中对齐的CSS示例代码
摘要：垂直居中对齐的核心代码如下：.elment{position:relative;top:50%;transform:translateY(-...
垂直居中对齐的核心代码如下：
.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;
}
【垂直居中对齐的CSS示例代码】相关文章：
★ 实现div垂直居中的display:table-cell方法示例介绍
★ CSS分页符代码
上一篇：
html css 标题背景 折边凸显效果
下一篇：
CSS3控制HTML元素动画效果