如何将卡与Bootstrap 4垂直对齐？

Question

<div class="container">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card bg-white mx-auto" id="maincard">
                <div class="card-body">
                    <h3 class="card-title text-center">Cerca un orario</h3>
                    <h6 class="card-subtitle mb-2 text-muted text-center">Scegli la categoria e compila il campo di ricerca.</h6>
                    <hr>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="display: {{none if not show_alert else block}}">
                        {{alert_message}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" action="">
                        <div class="form-group">
                            <label for="category">Categoria:</label>
                            <select class="form-control" id="category" name="type" onchange="modifyText()">
                                <option value="classes">Classi</option>
                                <option value="teachers">Docenti</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="user_input">Ricerca:</label>
                            <input type="text" class="form-control" name="user_input" placeholder="Es. 2DM" autofocus id="user_input" list="classes" autocomplete="off">
                        </div>
                        <br>
                        <div class="container">
                            <div class="row">
                                <div class="col text-center">
                                    <button type="submit" class="btn btn-secondary" style="width: 120px;">Cerca</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

我正在尝试使用Bootstrap 4垂直对齐卡，但这是我得到的：

卡未居中。 我该如何解决？我在互联网上搜索了一个解决方案，但没有成功。 我尝试了this，但没有用。

谢谢。

Answer 1

正如您在共享链接中指出的那样，“如果您要居中的元素的父级没有定义的高度，则所有垂直居中解决方案都将无法使用！”

您只需要将style='height:100vh'分配给具有类容器的div ...，如下所示 ：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container" style='height:100vh'>
  <div class="row align-items-center h-100">
    <div class="col-6 mx-auto">
      <div class="card bg-white mx-auto" id="maincard">
        <div class="card-body">
          <h3 class="card-title text-center">Cerca un orario</h3>
          <h6 class="card-subtitle mb-2 text-muted text-center">Scegli la categoria e compila il campo di ricerca.</h6>
          <hr>
          <div class="alert alert-danger alert-dismissible fade show" role="alert" style="display: {{none if not show_alert else block}}">
            {{alert_message}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
          </div>
          <form method="post" action="">
            <div class="form-group">
              <label for="category">Categoria:</label>
              <select class="form-control" id="category" name="type" onchange="modifyText()">
                <option value="classes">Classi</option>
                <option value="teachers">Docenti</option>
              </select>
            </div>
            <div class="form-group">
              <label for="user_input">Ricerca:</label>
              <input type="text" class="form-control" name="user_input" placeholder="Es. 2DM" autofocus id="user_input" list="classes" autocomplete="off">
            </div>
            <br>
            <div class="container">
              <div class="row">
                <div class="col text-center">
                  <button type="submit" class="btn btn-secondary" style="width: 120px;">Cerca</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>