Question

我确定这是一个重复的问题，但我已经从代码中删除了几乎所有内容，但仍无法使其工作。我是Flexbox的新手，并尝试按照https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/上的代码进行操作（另外，即使代码也不起作用！）。我使用的是Safari 11.1.1和Chrome 67.0.3396.87，因此它们不是旧的浏览器。

我正试图在屏幕上水平和垂直居中<div>。 div包含一个包含几个输入和一个按钮的表单。我试图将每个水平居中，并且组应该在<div>内垂直输入。

在Safari中，没有任何内容。在Chrome中，div是水平居中但不是垂直居中，但输入/按钮不是水平和垂直居中。

body {
  background: grey;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background: white;
}

<div id="holder">
  <form action="">
      <input type="text" placeholder="something">
      <input type="text" placeholder="something else">
      <button>An Action</button>
  </form>
</div>

我错过了什么？如上所述，即使上面提到的网站的示例代码也无法正常工作，所以我很难过。

Answer 1

您需要在height:100vh中设置body，或在height:100%上设置html,body

在表单中居中项目，使用form中的flexbox属性而不是#holder

body {
  margin: 0;
  height: 100vh;
  background: grey;
  display: flex;
  justify-content: center;
  align-items: center;
}

#holder {
  width: 300px;
  height: 300px;
  background: white;
}

form {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form>* {
  margin-bottom: 20px
}

<div id="holder">
  <form action="">
    <input type="text" placeholder="something">
    <input type="text" placeholder="something else">
    <button>An Action</button>
  </form>
</div>

即使使用大多数基本代码，弹性框也不能垂直居中

1 个答案: