手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >垂直居中对齐的CSS示例代码
垂直居中对齐的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示例代码】相关文章:

CSS完美代码的五个要点

DIV+CSS垂直居中一个浮动元素

CSS分页符代码

IE6定义1px左右高度的容器示例代码

实现CSS3中的border-radius(边框圆角)示例代码

三种CSS图表代码

用css实现十字的布局示例代码

如何让图像域和文本输入框水平居中之类的实现代码

用CSS实现垂直居中的3种方法

在div底部显示背景图片实现代码

精品推荐
分类导航