html - 我想让一个 div 在另一个 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>