Maison > Article > interface Web > Div在浏览器中居中显示_html/css_WEB-ITnose
Div在浏览器中居中显示_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:15:491112parcourir
各位大虾，请问怎样让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楼给力
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：【紧急】我想问一下HTML的TITLE标签，里面的内容能填写多少个？有限制吗_html/css_WEB-ITnoseArticle suivant：用html5实现涂擦效果？_html/css_WEB-ITnose