html网页设计垂直对齐,CSS Transform让百分比宽高布局元素水平垂直居中

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

Sponsor

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

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

HTML代码

您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！

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群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

suqing -

2015 年 07 月 24 日 下午 5:13

好用~感谢楼主~

_tanX -

2013 年 10 月 15 日 下午 11:17

div 会模糊的。。

tommy -

2013 年 07 月 28 日 上午 2:25

实在是高！

青衿 -

2013 年 07 月 12 日 上午 12:22

这个好！

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站