使用CSS 3垂直对齐

前端之家收集整理的这篇文章主要介绍了使用CSS 3垂直对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用CSS 3,有什么办法垂直对齐块元素?你有例子吗?
谢谢。

解决方法

最近看了这个问题,并尝试:

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%,-50%);    
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

这里是小提琴:

http://jsfiddle.net/sTcp9/6/

它甚至可以在使用“width / height:auto”时,在固定尺寸的位置。在Firefox,Chrome和IE(* gasp *)的最新版本上测试。

猜你在找的CSS相关文章