引导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 class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header></section>

Answer 2

我的工作是：

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header></section>