引导4中心垂直和水平对准

Question

引导4中心垂直和水平对准

我有一个只有表单存在的页面，我希望表单被放在屏幕的中央。

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  </div>

这个justify-content-center将表单水平对齐，但我不知道如何垂直对齐。我试过用align-items-center和align-self-center但它不起作用。

我遗漏了什么？

演示

Answer 1

我的工作是：<section&nbsp;class="h-100"> &nbsp;&nbsp;<header&nbsp;class="container&nbsp;h-100"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="d-flex&nbsp;align-items-center&nbsp;justify-content-center&nbsp;h-100"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="d-flex&nbsp;flex-column"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h1&nbsp;class="text&nbsp;align-self-center&nbsp;p-2">item&nbsp;1</h1> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;class="text&nbsp;align-self-center&nbsp;p-2">item&nbsp;2</h4> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;class="btn&nbsp;btn-danger&nbsp;align-self-center&nbsp;p-2"&nbsp;type="button"&nbsp;name="button">item&nbsp;3</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</header></section>

Answer 2

我的工作是：<section&nbsp;class="h-100"> &nbsp;&nbsp;<header&nbsp;class="container&nbsp;h-100"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="d-flex&nbsp;align-items-center&nbsp;justify-content-center&nbsp;h-100"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="d-flex&nbsp;flex-column"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h1&nbsp;class="text&nbsp;align-self-center&nbsp;p-2">item&nbsp;1</h1> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h4&nbsp;class="text&nbsp;align-self-center&nbsp;p-2">item&nbsp;2</h4> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;class="btn&nbsp;btn-danger&nbsp;align-self-center&nbsp;p-2"&nbsp;type="button"&nbsp;name="button">item&nbsp;3</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</header></section>