利用translate()進行水平垂直居中
阿新 • • 發佈:2019-02-09
translate()函式是css3的新特性.在不知道自身寬高的情況下,可以利用它來進行水平垂直居中.
程式碼如下:
//html:
<div class='wrap'>
我不知道寬高,但是我就是要水平垂直居中
</div>
//css
.wrap{
padding:10px;
background:green;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform: translate(- 50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
}
效果如下:
與負margin-left和margin-top實現居中不同的是,margin-left必須知道自身的寬高,而translate可以在不知道寬高的情況下進行居中,tranlate()函式中的百分比是相對於自身寬高的百分比,所以能進行居中.
但是相容性不是很好:Internet Explorer 10、Firefox、Opera 支援 transform 屬性。
Internet Explorer 9 支援替代的 -ms-transform 屬性(僅適用於 2D 轉換)。
Safari 和 Chrome 支援替代的 -webkit-transform 屬性(3D 和 2D 轉換)。
ie9以下不能使用,所以在使用時要考慮瀏覽器版本問題.