时间戳

首页 > 解决方案 > bootstrap 4上的水平和垂直居中卡

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

问题描述

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

<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>

标签： htmlcssbootstrap-4

解决方案

[测试 - 工作] 使用 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>

推荐阅读