html - 使用 flexbox 将视频和输入框居中

Question

我的视频、输入框和按钮在页面中央水平居中时遇到一点问题。我看到一些答案说我不需要 flexbox，实际上我已经尝试将边距设置为自动(将内容居中放置在视口(viewport)中间)但无济于事。当我尝试使用 chrome 开发人员工具检查代码时，它显示我的视频、内容和表单 div 占据了视口(viewport)宽度的 100%，所以这似乎是我无法将其居中的原因。当然，我可能是错的。我很难过。你们提供的任何帮助现在都会非常有用。如果不清楚请告诉我。这是我到目前为止所拥有的。 谢谢， 安娜

<div class="content">
<div class="video">
<h2>Want to read as fast as me? Follow the instructions below... 
</h2>
<iframe width="560" height="315" 
 src="https://www.youtube.com/embed/7SbJLfqPJgI" frameborder="0" 
 allow="accelerometer; autoplay; encrypted-media; gyroscope; 
 picture-in-picture" allowfullscreen></iframe>
 </div>
 <form>
<input type "text" placeholder="Tell us more about what books you 
like.">
<form>
</div>
<button type="submit" name="button">submit</button>
<footer>Anna Gibson @ 2018</footer>

Answer 1

好的，这就是我所做的。我这样做是为了让“内容 div”包含视频、输入框、按钮和页脚，并将它们全部对齐到“中心” . 下面是我的代码示例:

HTML:

  <div class="content">
    <div class="video">
      <h2>Want to read as fast as me? Follow the instructions below...</h2>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/7SbJLfqPJgI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
      <form>
    <input type "text" placeholder="Tell us more about what books you like.">
    <form>
     <button type="submit" name="button">submit</button>

     <footer>Anna Gibson @ 2018</footer>
      </div>

CSS:

.content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

form {
  width: 200px;
  margin: 0 auto;
}


input{
  margin: auto;
  width: 200px;
  height: 150px;
  margin-top: 20px;
  border: 2px solid black;
}

button {
  margin-top: 40px;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  background-color: #7a420a;
  color: white;
  margin: auto;
}