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;

应该工作正常。

具有内联样式的完整代码（我建议您使用class而不是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>

Answer 2

我相信下面的代码应该对您有用，只需尝试检查

.container.py-5{
    position: absolute; //or relative
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Answer 3

在您的d-flex align-items-center上添加body bootstrap4类，并将其高度放在100vh;

body{
  height:100vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body class="d-flex align-items-center">
    <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>
</body>

引导程序4上的水平和垂直居中卡片

3 个答案: