Вертикально и горизонтально центральная обертка div

Возможный дубликат:
Как центрировать DIV в DIV?

Теперь я пытаюсь

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

?????

Ответ 1

Попробуйте следующее:

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

Ответ 2

vertical-align не работает так, как большинство новичков ожидают его работы.

Здесь - это один учебник, объясняющий ситуацию. Похоже, вы хотите использовать метод 1.

Ответ 3


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

Ответ 5

Люди могут ненавидеть меня за то, что вы предлагаете это, но поместите его в TD, где выравнивание по вертикали по-прежнему выполнимо, не навлекая на себя никакого вреда.

Здесь представлены рабочие примеры: http://jsbin.com/ezolu3/edit

Далее следует разметка:

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