如何讓DIV水平和垂直居中三種方法
阿新 • • 發佈:2019-01-05
方法1 CSS實現水平和垂直居中
要讓DIV水平和垂直居中,必需知道該DIV得寬度和高度,然後設定位置為絕對位置,距離頁面視窗左邊框和上邊框的距離設定為50%,這個50%就是指頁面視窗的寬度和高度的50%,最後將該DIV分別左移和上移,左移和上移的大小就是該DIV寬度和高度的一半。
.mydiv{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
}
方法2
.mydiv{
height: 50px;
width : 100px;
margin:auto;
position: absolute;
top:0;
left:0;
bottom: 0;
right: 0;
}
該方法使用普遍,但是前提是必需設定DIV的寬度和高度。如果當頁面DIV寬度和高度是動態的,比方說需要彈出一個DIV層並且要居中顯示,DIV的內容是動態的,所以寬度和高度也是動態的,這時需要用jQuery可以解決居中。
方法3 jQuery實現水平和垂直居中
$(document).ready(function(){
$(window).resize(function (){
$('.mydiv').css({
position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2
});
});
// 最初執行函式
$(window).resize();
});
此方法的好處就是不需要知道DIV的具體寬度和高度大小,直接用jQuery就可以實現水平和垂直居中,而且相容各瀏覽器,這個方法在很多的彈出層效果中應用。