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水平和垂直居中
css讓div水平居中 說明,本文中所指的div包括html頁面中所有的元素。讓乙個div水平居中,直接用css就可以做到。只要設定了div的寬度,然後使用margin設定邊距0 auto,css自動算出左右邊距,使得div居中。mydiv 但是如果要使div垂直方向也居中,恐怕css需要修改了。c...
如何讓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屬性 ...
CSS水平和垂直居中
parent.son.parent son.parent1 transform 絕對定位,left50 向左平移 50 son2 margin left 絕對定位,left50 margin left 0.5 子元素寬度 注 此方法必須知道子元素寬度 son3 left right 0 son.pa...