CSS居中效果之transform的使用

发布时间：2015-07-15 17:04:19 作者：佚名

这篇文章主要介绍了CSS中使用transform达到布局居中的效果的方法,注意其和其他transform样式之间的冲突问题,需要的朋友可以参考下

简单有效，同时支持可变高度。为内容指定带有厂商前缀的transform: translate(-50%,-50%)和top: 50%; left: 50%;样式就可以让内容块居中。

CSS Code复制内容到剪贴板

.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

2015715162720790.jpg (608×401)

好处：

内容高度可变
代码量小

同时注意：

    不支持IE8
    需要写厂商前缀
    会和其他transform样式有冲突
    某些情况下的边缘和字体渲染会有问题

Tag：居中 transform css

相关文章

css3 transform属性详解
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2014-09-30
CSS中使用负margin值来调整居中位置
这篇文章主要介绍了CSS中使用负margin值来调整居中位置的方法,文中同时提到了这种常用方法的一些值得注意的地方,需要的朋友可以参考下
2015-07-15
仅使用CSS做到完全居中的超级攻略
这篇文章主要介绍了仅使用CSS做到完全居中效果的方法,强烈推荐!需要的朋友可以参考下
2015-07-15

最新评论