我想让一个div居中，而另一个div居中。

Question

这是我的CSS和html：

 .container { background-image: url('./images/bg.jpg'); height: 500px; width: 960px; margin: auto; } .logo { margin: auto; text-align: center; width: 960px; height: 100px; position: relative; top: 200px; } ul { list-style: none; } li { display: inline; } .nav { margin: auto; text-align: center; padding-right: 35px; clear: both; } 

 <div class="container"> <div class="logo"> <h1>My Page</h1> </div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> 

我认为我以<div class="logo"></div>方式可能不正确，但是我不确定如何在div中居中放置内容，我发现的任何解决方案似乎都会影响定位的<div class="nav"></div> 。

因此，这个问题有两个方面-如何将<div class="logo"></div>放置在<div class="container"></div>中央，然后如何放置<div class="nav"></div>在<div class="logo"></div>吗？

谢谢你的帮助。

Answer 1

您可以使用flexbox来做到这一点。
https://jsfiddle.net/bjdvz1km/

 .container { background-image: url('./images/bg.jpg'); height: 500px; width: 960px; text-align: center; margin: auto; display: flex; flex-wrap: wrap; align-content: center; } .logo { margin: auto; width: 960px; height: 100px; } ul { list-style: none; } li { display: inline; } .nav { margin: auto; padding-right: 35px; clear: both; } body { margin: 0; } 

 <div class="container"> <div class="logo"> <h1>My Page</h1> </div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> 

Answer 2

如果要相对定位两个div，则将相对定位的项居中于其父容器内的一种简单方法是使用left：50％，transform：translateX（-50％）。

 .container { background-image: url('./images/bg.jpg'); height: 500px; width: 960px; margin: auto; } .logo { margin: auto; text-align: center; width: 960px; height: 100px; position: relative; left: 50%; transform: translateX(-50%); } ul { list-style: none; } li { display: inline; } .nav { margin: auto; position: relative; text-align: center; padding-right: 35px; clear: both; left: 50%; transform: translateX(-50%); } 

 <div class="container"> <div class="logo"> <h1>My Page</h1> </div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> 

Answer 3

.container {
    background-image: url('./images/bg.jpg');
    height: 500px;
    width: 960px;
    margin: auto;
}

.logo {
    margin: auto;
    text-align: center;
    width: 960px;
    height: 100px;
    position: absolute;
    top: 40%;
    dispaly: block;
}

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

li {
    display: inline;
}



<div class="container">
    <div class="logo">
        <h1>My Page</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</div>

这是你想要的吗？