div居中可以用外边距margin属性来实现。
1、新建html文档，在body标签中添加div标签，标签的id为“header”，这时因为div标签中没有内容且没有设置样式，所以网页中显示空白：
2、这时为div标签设置原题中的css样式，此时虽然div盒子显示了，但是没有居中：
3、此时为div添加一个“margin: 0 auto”属性就会居中显示，“margin”指的是div标签的外边距，“0”指的是div标签上下的外边距，“auto”指的是div标签左右的外边距，并且会根据浏览器窗口大小自动居中，这时就是完整的html和css代码：
一、
<style>
#div1{
position:absolute;
width:100px
height:50px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-25px;
}
</style>
<body>
<divid="div1"></div>
</body>
二、
<script>
functionset_div2(obj){
with(objstyle){
left=documentbodyoffsetWidth-parseInt(width);
top=0;
}
</script>
<body>
<divid="div2"onload="set_div2(this)"></div>
</body>
你好，可以通过外边距margin或内边距padding来控制，通常是使用margin来控制，如margin: 0 auto;，这个样式加在要居中的div上即可。
如果满意，望采纳，谢谢！使用应用负外边距可以让DIV网页居中
#container{
position:absolute;
left:50%;
width:760px;
margin-left:-380px;
}
评：首先将容器绝对定位于相对页面左边缘 50% 的位置，这样该容器的左边距将从页面 50% 宽度的位置开始算起，然后将容器的左外边距设置成为负的容器宽度的一半，尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或的情况下）。标准浏览器如Mozilla, Opera, Safari等，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。body {padding: 0; margin: 0;}body,html{height: 100%;}#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}#outer[id] {display: table; position: static;}#middle {position: absolute; top: 50%;} / for explorer only/#middle[id] {display: table-cell; vertical-align: middle; position: static;}#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} / for explorer only /divgreenBorder {border: 1px solid green; background-color: ivory;}<div id=outer<div id=middle<div id=inner class=greenBorder</div</div</div以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）