垂直和水平中心主包装div

2018-06-03 23:32:29

可能重复：
如何将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>

?????

尝试这个：

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

大多数初学者期望它的工作方式， vertical-align不起作用。

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


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

链接地址: http://www.djcxy.com/p/13207.html

上一篇: Vertically And Horizonatally center main wrap div

下一篇: How to center three divs horizontally within a parent div?