HTML，CSS居中显示框

Question

这是注册框：

http://technicaldebt.co.uk/fyp/register.php

我正试着把方框放在网页中间。CSS附在下面。任何帮助都将不胜感激。

#fg_membersite fieldset {
left: 50%;
top: 50%;
width: 230px;
margin-top: -125px: /* height/2 */
margin-left: -115px; /* width/2 */
position: absolute;
}

#fg_membersite legend, #fg_membersite h2
{
font-family : Arial, sans-serif;
font-size: 1.3em;
font-weight:bold;
color:#333;
}

#fg_membersite label
{
font-family : Arial, sans-serif;
font-size:0.8em;
font-weight: bold;
}

#fg_membersite input[type="text"],#fg_membersite textarea,
#fg_membersite input[type="password"]
{
  font-family : Arial, Verdana, sans-serif;
  font-size: 0.8em;
line-height:140%;
color : #000; 
padding : 3px; 
border : 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

}

#fg_membersite input[type="text"],
#fg_membersite input[type="password"]
{
height:18px;
width:220px;
}

#fg_membersite #scaptcha
{
width:60px;
height:18px;
}

#fg_membersite input[type="submit"]
{
width:100px;
height:30px;
padding-left:0px;
}

#fg_membersite textarea
{
height:120px;
width:310px;
}

#fg_membersite input[type="text"]:focus,
#fg_membersite textarea:focus
{
color : #009;
border : 1px solid #990000;
background-color : #ffff99;
font-weight:bold;
}

#fg_membersite .container
{
margin-top:8px;
margin-bottom: 10px;
}

#fg_membersite .error
{
 font-family: Verdana, Arial, sans-serif; 
 font-size: 0.7em;
 color: #900;
 background-color : #ffff00;
}

#fg_membersite #register_password_errorloc
{
  clear:both;
}

#fg_membersite  fieldset#antispam
{
 padding:2px;
 border-top:1px solid #EEE;
 border-left:0;
 border-right:0;
 border-bottom:0;
 width:350px;
}

#fg_membersite fieldset#antispam legend
{
    font-family : Arial, sans-serif;
   font-size: 0.8em;
   font-weight:bold;
 color:#333;    
}

#fg_membersite .short_explanation
{
   font-family : Arial, sans-serif;
   font-size: 0.6em;
 color:#333;   
}

/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#fg_membersite .spmhidip
{
 display:none;
 width:10px;
 height:3px;
}
#fg_membersite #fg_crdiv
{
   font-family : Arial, sans-serif;
   font-size: 0.3em;
 opacity: .2;
 -moz-opacity: .2;
 filter: alpha(opacity=20);   
}
#fg_membersite  #fg_crdiv p
{
  display:none;
}

    #fg_membersite_content li
  {
   font-family : Arial, sans-serif;
  padding-top:10px;
  padding-bottom:10px;
}
    #fg_membersite_content 
{
         font-family : Arial, sans-serif;
         font-size: 0.9em;
  line-height: 150%
 }

#fg_membersite_content h2
  {
   font-family : Arial, sans-serif;
   font-size: 1.5em;
   font-weight:bold;
 color:#333;
}

下面的HTML：

<!-- Form Code Start -->
<div id='fg_membersite'>
<form id='register' action='/fyp/register.php' method='post' accept-charset='UTF-8'>
<fieldset >
<legend>Register</legend>



<input type='hidden' name='submitted' id='submitted' value='1'/>

<div class='short_explanation'>* required fields</div>

<input type='text'  class='spmhidip' name='spe8306af0d23b01a2bf7c1734aacf25fe' />

<div><span class='error'></span></div>
<div class='container'>
<label for='name' >Your Full Name*: </label><br/>
<input type='text' name='name' id='name' value='' maxlength="50" /><br/>
<span id='register_name_errorloc' class='error'></span>
</div>

<div class='container'>
<label for='email' >Email Address*:</label><br/>
<input type='text' name='email' id='email' value='' maxlength="50" /><br/>
<span id='register_email_errorloc' class='error'></span>
</div>

<div class='container'>
<label for='username' >UserName*:</label><br/>
<input type='text' name='username' id='username' value='' maxlength="50" /><br/>
<span id='register_username_errorloc' class='error'></span>
</div>

<div class='container' style='height:80px;'>
<label for='password' >Password*:</label><br/>
<div class='pwdwidgetdiv' id='thepwddiv' ></div>
<noscript>
<input type='password' name='password' id='password' maxlength="50" />
</noscript>    
<div id='register_password_errorloc' class='error' style='clear:both'></div>
</div>

<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>

</fieldset>
</form>

Answer 1

如果不使用某种类型的display: table设置，则在不使用JavaScript或不知道元素本身的高度的情况下，无法将其垂直居中：

#fg_membersite fieldset {
    display: inline-block;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    width: 230px;
    margin-top: -181px;
    margin-left: -115px;
    position: absolute;
}

"181px“是从fieldset解析到的362px高度派生出来的。如果高度发生变化，你将不得不更新它。

Answer 2

您的边距定义将被忽略。您在CSS定义中使用冒号:而不是分号(;)：

#fg_membersite fieldset {
    left: 50%;
    top: 50%;
    width: 230px;
    margin-top: -125px; /* height/2 */
    margin-left: -115px; /* width/2 */
    position: absolute;
}

Answer 3

从#fg_membersite fieldset中移除定位，这会使你的方框水平居中对齐，然后使用javascript垂直对齐。如下所示：

使用javascript：(在body标记的末尾加载)

<script>
  var body = document.body;
  var bodyHeight = body.offsetHeight;
  var box = document.getElementById('main'); //replace 'main' with Id of the fieldset  
  var height = box.offsetHeight;
  box.style.marginTop = ((bodyHeight/2) - (height/2));
</script>