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...