在每个浏览器的屏幕上居中 div
Posted
技术标签:
【中文标题】在每个浏览器的屏幕上居中 div【英文标题】：Center a div on the screen in every browser 【发布时间】：2012-11-17 15:59:02 【问题描述】：我有一个包含我的表单的 div（作为一个蓝色框）。我需要在每个浏览器的屏幕上居中该 div。我对此进行了搜索，人们说如果我将保证金设置为auto，它应该可以工作。
但是不，这会将我的框（div）放在每个浏览器的左侧。
<html>
..
...
<body>
<div id="questionare">
<form .....
....
....
</form>
</div>
</body>
...
....
</HTML>
在我的 CSS 上，我尝试了以下操作：
#questionare
margin: 0 auto ;
position:relative;
width: 300px;
text-align: left;
background:rgb(127, 177, 198);
padding: 88px 79px 29px;
border-radius: 10px;
box-shadow: 0px 5px 12px rgba(0,0,0,0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px; -khtml-border-radius: 10px;
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
-khtml-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
behavior: url(/PIE.htc);
-或-
#questionare
margin-left: auto ;
margin-right: auto ;
position:relative;
width: 300px;
text-align: left;
background:rgb(127, 177, 198);
padding: 88px 79px 29px;
border-radius: 10px;
box-shadow: 0px 5px 12px rgba(0,0,0,0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px; -khtml-border-radius: 10px;
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
-khtml-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
behavior: url(/PIE.htc);
表单样式为空
form
解决办法是什么？
【问题讨论】：
您的格式不正确。请参阅我的答案以获取示例，并使用您提供的 html 和 css 看到它使用正确的格式。 【参考方案1】：修复标签的布局，布局将正常工作。例如</div> 而不是< /div>。
在这里查看它的工作原理：http://jsfiddle.net/XscZK/
【讨论】：
感谢您的帮助，我只是看到了我的错误，我之前有一个带有位置的图像标题：absolute; 没问题。使用正确格式的代码，您的 css 和元素将按应有的方式工作。然后，您也可以以相同的方式将图像居中。【参考方案2】：在大多数情况下，最好不要使用集中式 div 来设置其内容的样式，而是这样做。
#questionaire
position:realative;
margin:auto;
width:300px;
#questionaire_innner_div
position:relative;
float:left;
padding: 88px 79px 29px;
width:242px;
那么你的 html 应该是这样的。
<div id="questionaire">
<div id="questionaire_innner_div">
<form>
...
...
...
</form>
</div>
</div>
【讨论】：
【参考方案3】：除了使用其他答案中建议的 Doctype 之外， 你需要有这个css规则：
bodytext-align: center;
.wrapper
text-align: left;
margin: 0 auto;
width: 100px; /* or your desired size, or no size if you want the div to be 100% */
height: 100px; /* or your desired size, or no size if you want the div to be 100% */
将正文文本对齐设置为居中很重要，这样它就可以在所有浏览器中使用
【讨论】：
感谢您的帮助，我只是看到了我的错误，在此之前我有一个带有位置的图像标题：absolute; .【参考方案4】：它实际上对我有用，请参阅jsFiddle。
我没有更改任何代码。
您的问题可能是您缺少doctype，迫使浏览器以怪癖模式呈现。
【讨论】：
哇！太奇怪了，现在我正在使用用户在这里推荐我的这个doctipe：ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> .我的文件也是一个 php 文件（但这不应该是问题）【参考方案5】：尝试使用类似的 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
【讨论】：
以上是关于在每个浏览器的屏幕上居中 div的主要内容，如果未能解决你的问题，请参考以下文章