垂直和水平居中主包装div [重复]答案

【问题标题】：Vertically And Horizonatally center main wrap div [duplicate]垂直和水平居中主包装div [重复]
【发布时间】：2011-02-18 20:33:48
【问题描述】：

可能重复：
How to center DIV in 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>

?????

【问题讨论】：

机器人是否放置了标签？
@Bar 至少它没有 C++ 标签了...
重复：stackoverflow.com/questions/114543/how-to-center-div-in-div stackoverflow.com/questions/49350/…

标签： html css

【解决方案1】：

vertical-align 不像大多数初学者所期望的那样工作。

Here 是一个解释这种情况的教程。听起来你想要方法 1。

【讨论】：

我建议你点击链接并按照它告诉你的去做。

【解决方案2】：


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

【讨论】：

【解决方案3】：

This tutorial 介绍了一种过去对我很有效的方法。

【讨论】：

【解决方案4】：

人们可能会因为我的建议而讨厌我，但请将其放在 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>

【讨论】：

【解决方案5】：

试试这个：

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

【讨论】：