HTML, CSS Center a Box

Question

Here is the registration box:

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

I am trying to get the box to center in the middle of the webpage. The CSS is attached below. Any help would be greatly appreciated.

#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;
}

The HTML BELOW:

<!-- 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>

`margin-top: -125px:` => `margin-top: -125px;` with a semicolon. — Belladonna, Mar 05 '13 at 15:34

score 1 · Answer 1 · answered Mar 05 '13 at 15:35

1

Without using a display: table setup of some kind, you can't center it vertically without either JavaScript or knowing the height of the element itself:

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

The "181px" is derived from the 362px height that the fieldset resolves to. You will have to update that should the height change.

answered Mar 05 '13 at 15:35

Explosion Pills

188,624
52
326
405

It's worth noting (as in my answer) that you almost had it, you just mistyped your CSS definition (see `:` instead of `;` after your `margin-top` definition). – BenM Mar 05 '13 at 15:38
@BenM `-125px` is not enough – Explosion Pills Mar 05 '13 at 15:40
Yes, hence "almost had it"... ;) – BenM Mar 05 '13 at 15:41

score 0 · Answer 2 · answered Mar 05 '13 at 15:35

Your margin definitions are being ignored. You have a colon : instead of a semicolon (;) in your CSS definition:

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

Mr_Green · Answer 3 · 2013-03-08T11:51:42.300

0

Remove positioning from #fg_membersite fieldset which makes your box aligned in center horizontally then by using javascript align it vertically. Something like this:

using javascript: (load at the end of the body tag)

<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>

Working Fiddle using simple javascript

Working Fiddle using jQuery

edited Mar 08 '13 at 11:51

answered Mar 05 '13 at 15:37

Mr_Green

40,727
45
159
271

There's really no need for jQuery here. – BenM Mar 05 '13 at 15:37
@BenM My solution gives exact vertical align and It is also a another way of doing. – Mr_Green Mar 05 '13 at 15:39
Yes, I know. My point mind you was that the same result can be easily achieved through CSS. My point was that the OP isn't using jQuery on the page (as far as I can tell), and including a library for something this trivial is serious overkill. – BenM Mar 05 '13 at 15:41
@BenM yes you are right. But I was happy that my experiment worked and thought to share here :). – Mr_Green Mar 05 '13 at 15:46
@BenM I updated my post using javascript. – Mr_Green Mar 05 '13 at 16:02

score -1 · Answer 4 · edited Jun 20 '20 at 09:12

-1

remove the

"left:50%"

and

right:50%

of css :

fg_membersite fieldset

and use

position:relative; margin-left:auto; margin-right:auto

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 05 '13 at 15:33

john Smith

17,409
11
76
117

I have done that it is still not centered :( – user1249957 Mar 05 '13 at 15:35
ah i see add a width to the wrapping ellement – john Smith Mar 05 '13 at 15:35
in your case " html {width:100%} – john Smith Mar 05 '13 at 15:35
No. This will only align it horizontally, not vertically. – BenM Mar 05 '13 at 15:36

HTML, CSS Center a Box

4 Answers4

fg_membersite fieldset