CSS图书馆 » HTML & CSS » CSS Transform让百分比宽高布局元素水平垂直居中

CSS Transform让百分比宽高布局元素水平垂直居中

发表于: HTML & CSS. 评论 (4)
Sponsor

center-percent-layout

很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢?

如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性。下面来看代码实例:

HTML代码

<div class="center">您可以尝试改变浏览器大小,这个元素依然是水平垂直居中的哦!</div>

CSS代码

.center{
position: absolute;
top: 50%;
left: 50%;
width:50%;
height:30%;
padding:20px;
text-align:center;
background:#393;
color:#fff;
transform: translate(-50%, -50%);
}

查看演示

如果你直接复制代码无法使用,请添加-webkit-transform或-moz-transform前缀,案例中我使用了-prefix-free这个插件,插件作用就是不需要输入-moz-和-webkit-这些前缀。

想查看transform对浏览器的兼容,请浏览:http://caniuse.com/transforms3d

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论4 Responses to “CSS Transform让百分比宽高布局元素水平垂直居中”

  1. suqing - 回复

    好用~感谢楼主~

  2. _tanX - 回复

    div 会模糊的。。

  3. tommy - 回复

    实在是高!

  4. 青衿 - 回复

    这个好!


{ 发表评论 }