DIV居中几种写法

1.水平居中

<style type="text/css">
.className {
width : 270px ;
height : 150px ;
margin : 0 auto ;
}
</style>

2.水平垂直居中 css写法

<style type="text/css">
.className {
width : 270px ;
height : 150px ;
position : absolute ;
left : 50% ;
top : 50% ;
margin : -75px 0 0 -135px ;
}

</style>

3.水平垂直居中 js写法

< script type = " text/javascript " >
$(document).ready( function (){

$(window).resize( function (){

$( ' .className ' ).css({
position: ' absolute ' ,
left: ($(window).width() - $( ' .className ' ).outerWidth()) / 2,
top: ($(window).height() - $( ' .className ' ).outerHeight()) / 2
});

});
// To initially run the function:
$(window).resize();

});
< / script>



转载于:https://www.cnblogs.com/superchen/archive/2011/06/09/2076646.html