利用translate 進行水平垂直居中

2021-07-24 10:53:25 字數 633 閱讀 5433

translate()函式是css3的新特性.在不知道自身寬高的情況下,可以利用它來進行水平垂直居中.

**如下:

//html:

'wrap'

>

我不知道寬高,但是我就是要水平垂直居中

//css

.wrap

效果如下:

與負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以下不能使用,所以在使用時要考慮瀏覽器版本問題.

巧用translate設定元素垂直水平居中

之前在做手機專案時,用到很多自定義彈窗,然後要求都垂直水平要居中,最開始的時候想用calc來計算,可是css3 的calc相容性不是很好,於是後來就借助了js來計算,今天偶然看到別人的乙個方法,瞬間感覺自己做了很多無用功 translate,translate,translate,translate...

css 利用translate讓元素居中

參考 父元素 position relative 居中元素 position absolute top 50 基於父元素 left 50 基於父元素 transform translate 50 50 基於自身 注意 此方法可能會導致畫素模糊問題,因為css 的 transform translat...

opencv利用投影法進行水平切割和垂直切割

水平投影切割 include include using namespace std using namespace cv int main for y 0 yheight y vectorroilist 用於儲存分割出來的每個字元 int startindex 0 記錄進入字元區的索引 int e...