在每个浏览器的屏幕上居中 div答案

【问题标题】：Center a div on the screen in every browser在每个浏览器的屏幕上居中 div
【发布时间】：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 看到它使用正确的格式。

标签： css html margin center

【解决方案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规则：

body{text-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">

【讨论】：