Vertically And Horizonatally center main wrap div

Question

Possible Duplicate:
How to center DIV in DIV?

Now i try

<html>
<head>

        <title>?????????????????</title>
        <style type="text/css">   
    body
    {

            margin-left: auto;
            margin-right:auto;
    }

    #wrap
    {
            background: black;
            margin-left: auto;
            margin-right:auto;
            height:450px;
            width:450px;
            position:absolute;
            top:50%;
            right:50%;
            left:50%;
            margin-top:-225px;
         }
    </style>
</head>
<body>
        <div id="wrap">
                Hello
        </div>
</body>
</html>

?????

duplicate: http://stackoverflow.com/questions/114543/how-to-center-div-in-div http://stackoverflow.com/questions/49350/practical-solution-to-center-vertically-and-horizontally-in-html-that-works-in-ff — ghoppe, May 12 '10 at 21:51

score 4 · Answer 1 · answered May 12 '10 at 21:36

4

vertical-align does not work the way most beginners expect it to work.

Here is one tutorial explaining the situation. It sounds like you want Method 1.

answered May 12 '10 at 21:36

Jon Purdy

53,300
8
96
166

2

I would advise you click the link and do what it tells you to do. – Eric May 23 '10 at 07:17

score 0 · Answer 2 · answered May 12 '10 at 21:52


<html>
<head>
    <title>?????????????????</title>
    <style type="text/css">

    .ui-container
    {
        background: red;
    }
    .ui-wrapper
    {
        margin: auto;
        background: black;
        height:450px;
        width:450px;
        color: red;
    }
    </style>
</head>
<body>
    <div class="ui-container">
        <div class="ui-wrapper">
                <p>Hello</p>
        </div>
    </div>
</body>
</html>

score 0 · Answer 3 · answered May 12 '10 at 21:54

0

This tutorial covers a method that has worked well for me in the past.

answered May 12 '10 at 21:54

warrenm

31,094
6
92
116

score 0 · Answer 4 · answered May 16 '10 at 13:30

People may hate me for suggesting this, but place it within a TD, where vertical-aligning is still doable without inflicting any harm on yourself.

I've provided a working examples here: http://jsbin.com/ezolu3/edit

The markup follows:

<table id="vCent">
  <tbody>
    <tr>
      <td valign="center">

        <div id="foo">
          <p>Using tables incorrectly is wrong, without question. But sometimes there are other things that are more wrong - "wrongerer," if you will. Causing yourself unnecessary frustration trying to get an element to center itself vertically, for example, is one of those <em>wrongerer</em> things. Don't bother, just go with what works.</p>
        </div>

      </td>
    </tr>
  </tbody>
</table>

score 0 · Accepted Answer · answered May 23 '10 at 06:58

Try this:

<html>
    <head>
        <title>?????????????????</title>
        <style type="text/css">
        #content
        {
            background: black;
            margin: -225px;
            height: 450px;
            width: 450px;
        }
        #wrap
        {
            height: 0px;
            width: 0px;

            position:absolute;
            top:50%;
            left:50%;
        }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="content">
                Hello
            </div>
        </div>
    </body>
</html>

Vertically And Horizonatally center main wrap div

5 Answers5