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,不建议使用,参考代码:
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;
}
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>
本人菜鸟,以上方法纯属个人总结,如有没法解决您的问题请各位看官不要计较,且去百度上找大神的帖子参考即可。