Heim > Artikel > Web-Frontend > Div在浏览器中居中显示_html/css_WEB-ITnose
Div在浏览器中居中显示_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:15:491115Durchsuche
各位大虾，请问怎样让DIV在浏览器居中显示？如果设他的边距的话，换个尺寸的显示器就有不一样了，谢谢了！！！
回复讨论(解决方案)
设置CSS:
div{
margin-left:auto;
margin-right:auto;
}
这个需要动态设置Div的位置
style="position:absolute;top={1}px;left={2}px;"
如上，你的Div的样式需要设置为这个，但top和left是需要动态计算的。
问题点就是要动态的获取浏览器窗口的尺寸。于是解决办法如下：
<html> <head> <title>DIV居中显示</title> <script type="text/javascript"> var setDivCenter = function(divId){ var oDiv = document.getElementById(divId); oDiv.style.position = "absolute"; oDiv.style.top = (document.body.offsetHeight - 150) / 2 + "px";//这个150是div的高度 oDiv.style.left = (document.body.offsetWidth - 200) / 2 + "px";//这个200是div的宽度 }; </script> </head> <body onload="setDivCenter('dvCenter')"> <div id="dvCenter" style="width:200px;height:150px;background-color:red;"> 我在浏览器的中间 </div></body> </html> 刚刚写的，已经通过测试~~
非常感谢！！！！！！
我要看看怎么解决
看看是怎么解决的
2楼给力
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：【紧急】我想问一下HTML的TITLE标签，里面的内容能填写多少个？有限制吗_html/css_WEB-ITnoseNächster Artikel：用html5实现涂擦效果？_html/css_WEB-ITnose