[RESOLVED] Align Div in Another Div: Two Ways

[chris.cavage]

How do I align a div within another div both horizontally and vertically? I've google this and cannot come up with a solution.

Here's what I have now:

<style type="text/css">
<!--
#outer {
	position:relative;
	width: 100%;
	height: 100%;
	}
#inner {
	width:auto;
	margin-left:auto;
	margin-right:auto;
	}
-->
</style>

<div id = "outer">
<div id="inner">
      <form id="form1" name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
	  
        <table width="200" border="0" align="center">
          <tr>
            <td colspan="2" align="center" bgcolor="#333333">Login</td>
          </tr>
          <tr>
            <td bgcolor="#333333">Username: </td>
            <td bgcolor="#333333"><input type="text" name="username" id="username" /></td>
          </tr>
          <tr>
            <td bgcolor="#333333">Password: </td>
            <td bgcolor="#333333"><input type="password" name="password" id="password" /></td>
          </tr>
          <tr>
            <td bgcolor="#333333">&nbsp;</td>
            <td bgcolor="#333333"><input type="submit" name="login" id="login" value="Login" /></td>
          </tr>
        </table>
        <p>&nbsp;</p>
      </form>
      </div>
      </div>

It only aligns horizontally.

[kows]

The only real way to do this effectively is to position the child <div> absolutely. You can't vertically align something using floats, or the vertical-align property (which tables can do easily). But, my solution still only helps when you child <div> is of a fixed width and height, which is definitely not always the case. I'm not sure what you'd do otherwise.

#parent {
  background: #000;
  height: 100%;
  position: relative;
  width: 100%;
}

#child {
  background: #ff0;
  height: 100px;
  left: 50%;
  margin-left: -100px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  width: 200px;
}

HTML:

<div id="parent">
  <div id="child"></div>
</div>

The child (#child) is 200 pixels wide by 100 pixels tall, and so the margins are set up the way they are to bring them back half of their width/height so that the center of the #child element is in the center of the #parent element. Making the left and top properties 50% puts the top left corner of the #child element in the center, which isn't really ideal. This is why a fixed width and height is necessary, because you have to apply a fixed negative margin.

Hope that made sense.

[chris.cavage]

Thanks... I did read on a few sites about setting this method, but I guess I thought there'd be an easier way.

I'm surprised there isn't...

Either way, I am working on your code, if I have issues I'll post back.

Appreciate it.