以CSS为中心的DIV包含其他DIV

如何使用CSS在div中水平居中？我正在努力，我把它从左到右居中，但我不能把它从上到下居中。

        html {
        height:100%;
    }
    body {
        padding:0px;
        margin: 0px;
        height:100%;
    }
    #openFrame {
        position:fixed;
        top:0px;
        width:100%;
        left:0%;
        height:100%;
    }
    .main {
        position: absolute;
        width: 80%;
        max-height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    #vid {
        width:100%;
        max-height:100%;
        vertical-align: middle;
    }
    #bottom {
        width:100%;
        height:69px;
        background-color: green;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;
    }

垂直居中div有点棘手。基本上，您必须将其position设置为absolute，将容器的position设置为relative。然后将top和left的值设置为50%，并通过应用负边距减去要居中的元素的宽度/高度的一半。

Codepen示例

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
        body, html, #container {
            height: 100%;
            width: 100%;
        }
        #container {
            position: relative;
        }
        #content {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
            background-color: red;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="content"></div>
        </div>
    </body>
</html>

相关内容

最新更新

热门标签：