我想让一个 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

如果您想相对定位两个 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 2

您可以使用 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 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>

这是你想要的吗？

我想让一个 div 在另一个中间居中，另一个 div 在它下面居中。

I want to have one div centered inside another with another div centered below that.

html

css

positioning