[前端]关于让DIV居中的几种常用方法

CSS

方法一：给body或者div标签添加margin:0 auto实现水平居中，参考代码：

body{ margin:0 auto}

Ps:如果DIV要用这个需要设置宽度.

方法二：给body和DIV标签分别添加添加文本居中属性和margin,参考代码：

body {TEXT-ALIGN: center;}

div { MARGIN-RIGHT: auto; MARGIN-LEFT: auto}

方法三： 对于wrap进行相对定位，然后使用负的边距抵消偏移量，参考代码：

#div{ 
position:absolute; 
width:x px; 
left:50%; 
margin-left:-x/2 px 
} 
方法四：通过css的expression，比较占客户端cpu，不建议使用，参考代码:

div{

position:absolute;

left:expression((body.clientWidth-50)/2);

top:expression((body.clientHeight-50)/2);
}

方法五：通过改变父元素的容量来实现居中,参考代码：

body { 
padding:10px 150px; 
} 

div{

border:1px solid #333; 
}

js

方法六:通过JS实现层居中,参考代码：

function moveit() //这个函数用于把层放到浏览器中间
{
div.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2) document.body.scrollLeft;
div.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2) document.body.scrollTop;
}  

window.οnlοad=moveit; //网面打开时时执行moveit()
window.οnresize=moveit; //当调整浏览器大小时执行moveit()
window.οnscrοll=moveit; //当拉动滚动条时执行moveit() h

方法七：用JS通过坐标与宽度的运算来实现，参考代码：

$(document).ready( function (){

                                      

$(window).resize( function (){

             

   $( '.className' ).css({

    position: 'absolute' ,

    left: ($(window).width()

      - $( '.className' ).outerWidth())/2,

    top: ($(window).height()

      - $( '.className' ).outerHeight())/2

   });

                   

  });

             

             

$(window).resize();

             

});

 

html

方法八:用HTML的标签属性实现上下居中，参考代码：

<div style="height:30px; line-height:30px;" align="center" valign="center">上下居中</div>

 

 

 

 

 

本人菜鸟，以上方法纯属个人总结，如有没法解决您的问题请各位看官不要计较，且去百度上找大神的帖子参考即可。