Question

您好我的问题是关于对齐div。在我正在努力工作的网站上，我有一个div，里面的div是一个孩子div。我需要孩子在成人div的中间。左侧和右侧在中间对齐，但它粘在顶部。如果有人能帮助我，我将不胜感激！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title></title>
</head>
<body>
    <div id="container">
        <div id="logo">
        </div>
        <div id="nav">
        </div>
        <div id="content-background">
            <div id="content">
            </div>
        </div>
        <div id="faqs">
        </div>
        <div id="footer">
            <div id="footer-right">
            </div>
            <div id="footer-left">
            </div>
            <div id="footer-bot">
            </div>
        </div>
    </div>
</body>
</html>






* {
    margin: 0px;
    padding: 0px;
}

#container {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    width: 25%;
    height: 50px;
    float: left;
    background-color: red;
}

#nav {
    width: 75%;
    height: 50px;
    float: left;
    background-color: green;
}

#content-background {
    width: 100%;
    height: 600px;
    clear: both;
    background-image: url('images/background.jpg');
}

#content {
    width: 50%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
}

#faqs {
    width: 100%;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
}

#footer {
    width: 100%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

#footer-right {
    width: 50%;
    height: 150px;
    float: left;
    background-color: blue;
}

#footer-left {
    width: 50%;
    height: 150px;
    float: left;
    background-color: pink;
}

#footer-bot {
    width: 100%;
    height: 50px;
    clear: both;
    background-color: green;
}

Answer 1

似乎你想要将div垂直对齐到中间和水平。子div在水平方向看起来很好，但垂直对齐中心有点棘手。

一个简单的解决方案，因为您知道#content-background的高度是相对于父级位置#content，然后将其向下移动150像素。

#content {
    ...
    position: relative;
    top: 150px;
}

这是一个工作小提琴http://jsfiddle.net/ry5xU/3/

这里有一个关于如何实现真正垂直居中的非常好的细分： How to vertically center divs?

Answer 2

您可以使用margin:auto在中心显示div。

结帐this和this或this可能会有帮助。

Answer 3

#main_div {position:relative;}
#child_div {position:absolute; right:50%; margin-right:-200px; top:50%; margin-top:-200px;}

你应该为你的CSS做这件事。当你的孩子div的宽度和高度为400px时，＆＃34; margin-right＆＃34;或＆＃34; margin-top＆＃34;你写-200px就可以了。这意味着后面有一个减去的宽度的一半应该在＆＃34; margin-right＆＃34;而后面有一个减去的高度的一半应该在＆＃34; margin-top＆＃34;中。祝你好运。

将Div与中间对齐？

3 个答案: