如何讓DIV水平和垂直居中

2021-08-21 10:42:37 字數 1002 閱讀 9077

css讓div水平居中

說明,本文中所指的div包括html頁面中所有的元素。

讓乙個div水平居中,直接用css就可以做到。只要設定了div的寬度,然後使用margin設定邊距0 auto,css自動算出左右邊距,使得div居中。

.mydiv  

但是如果要使div垂直方向也居中,恐怕css需要修改了。

css實現水平和垂直居中

要讓div水平和垂直居中,必需知道該div得寬度和高度,然後設定位置為絕對位置,距離頁面視窗左邊框和上邊框的距離設定為50%,這個50%就是指頁面視窗的寬度和高度的50%,最後將該div分別左移和上移,左移和上移的大小就是該div寬度和高度的一半。

.mydiv 

該方法使用普遍,但是前提是必需設定div的寬度和高度。如果當頁面div寬度和高度是動態的,比方說需要彈出乙個div層並且要居中顯示,div的內容是動態的,所以寬度和高度也是動態的,這時需要用jquery可以解決居中。

jquery實現水平和垂直居中

jquery實現水平和垂直居中的原理就是通過jquery設定div的css,獲取div的左、上的邊距偏移量,邊距偏移量的演算法就是用頁面視窗的寬度減去該div得寬度,得到的值再除以2即左偏移量,右偏移量演算法相同。注意div的css設定要在resize()方法中完成,就是每次改變視窗大小時,都要執行設定div的css,**如下:

$(window).resize(function());        

}); 

此外在頁面載入時,就需要呼叫resize()。

注意要設定目標元素的css樣式:margin:

-100px00

-150px

此方法的好處就是不需要知道div的具體寬度和高度大小,直接用jquery就可以實現水平和垂直居中,而且相容各瀏覽器,這個方法在很多的彈出層效果中應用。

如何讓DIV在視窗水平和垂直居中

本例項以新文件開始 先放置乙個div,並且設定class名為aa,賦予它css屬性 width 0 height 0 position fixed left 50 rigth 50 top 50 bottom 50 3 在.aa中放置乙個div,並且設定class名為aaa,賦予它必要的css屬性 ...

如何讓DIV水平和垂直居中 宿雪家的小鎮 新浪部落格

css讓div水平居中 說明,本文中所指的div包括html頁面中所有的元素。讓乙個div水平居中,直接用css就可以做到。只要設定了div的寬度,然後使用margin設定邊距0 auto,css自動算出左右邊距,使得div居中。mydiv 但是如果要使div垂直方向也居中,恐怕css需要修改了。c...

CSS水平和垂直居中

parent.son.parent son.parent1 transform 絕對定位,left50 向左平移 50 son2 margin left 絕對定位,left50 margin left 0.5 子元素寬度 注 此方法必須知道子元素寬度 son3 left right 0 son.pa...