/prog/ - DIV in the center

Name: Anonymous 2010-12-17 16:15

How to put a div in the center (Vertical and horizontal) of a HTML page ?
Google gives me answers but as I know neither the width and the height of the div, I can't use them.
There also is something like :
#wrapper {
    z-index:1;
    width:100%;
    height:100%;
    display:table;
}
#cell {
    display:table-cell;
    vertical-align:middle;
}
<div id="wrapper">
    <div id="cell">
      <div id="content">
      </div>
      </div>
</div>
But I can't seem to have it working.

Name: Anonymous 2010-12-17 16:42

Fixed : it isn't compatible with HTML5.
I now know I won't use HTML5 before long.

Name: Anonymous 2010-12-17 17:02

Works for me.

<!DOCTYPE html><html><head><style>

body, html { height: 100%; padding: 0; margin: 0; }

#a { height: 100%; overflow: auto; margin: 0 auto; background: #EE9999; display: table; }

#b { background: #99EE99; vertical-align: middle; display: table-cell; }

#c { border: 1px solid #000; background: #9999EE; }

</style></head><body><div id="a"><div id="b"><div id="c"><p>Butts</p></div></div></div></body></html>

Name: Anonymous 2010-12-17 17:22



<html>

<head>

<style type="text/css">

#wrapper {

  position: absolute;

  top: 50%;

  left: 50%;

}

#content {

  width: 200px;

  height: 200px;

  margin: -100px 0 0 -100px;

}

</style>

</head>

<body>

  <div id="wrapper">

    <div id="content" style="background-color: red;" />

  </div>

</body>

</html>

Now leave and never come back.

DIV in the center

1 Name: Anonymous 2010-12-17 16:15

2 Name: Anonymous 2010-12-17 16:42

3 Name: Anonymous 2010-12-17 17:02

4 Name: Anonymous 2010-12-17 17:22

5 Name: Anonymous 2011-02-18 19:59

Name: Anonymous 2010-12-17 16:15

Name: Anonymous 2010-12-17 16:42

Name: Anonymous 2010-12-17 17:02

Name: Anonymous 2010-12-17 17:22

Name: Anonymous 2011-02-18 19:59