很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置 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;
- webkit-transform: translate(-50%, -50%);
- -moz-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- }
来源: http://www.bubuko.com/infodetail-2005484.html