html - Bootstrap 4 上的水平和垂直居中卡

Question

我在将卡片(或容器)居中时遇到问题。我可以水平居中但不能垂直居中。我已经测试了在堆栈和其他网页上找到的一些代码，但它似乎不起作用。我当前的代码是:

<div class="container col-md-3 py-5">
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">Login</h3>
        </div>
        <div class="card-body">
            <form class="form">
                <div class="form-group">
                    <label for="username">Username:</label> <input  class="form-control" type="text" name="username" id="username" autofocus required >
                </div>
                <div class="form-group">
                    <label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required>
                </div>
             </form>
        </div>
    </div>
</div>

Answer 1

[测试 - 工作] 使用 flexbox。 https://www.bootply.com/AaDqw82aFL#

用包含以下两个样式规则的类用额外的 div 包装您的代码。

display: flex;
align-items: center;
justify-content: center; 
align-conten:center; 
min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
min-height: 100vh;

它应该可以正常工作。

具有内联样式的完整代码(我建议您使用类而不是 style 属性):

  <div style=" display: flex; align-items: center; justify-content: center; align-conten:center; min-height: 100%;  /* Fallback for browsers do NOT support vh unit */min-height: 100vh;">
  <div class="container col-md-3 py-5" style="height: 200px; width:200px">
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">Login</h3>
        </div>
        <div class="card-body">
            <form class="form">
                <div class="form-group">
                    <label for="username">Username:</label> <input class="form-control" type="text" name="username" id="username" autofocus="" required="">
                </div>
                <div class="form-group">
                    <label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required="">
                </div>
             </form>
        </div>
    </div>
</div>
</div>