我在将卡片(或容器)居中时遇到问题。我可以水平居中但不能垂直居中。我已经测试了在堆栈和其他网页上找到的一些代码,但它似乎不起作用。 我当前的代码是:
<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>
最佳答案
[测试 - 工作] 使用 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>
关于html - Bootstrap 4 上的水平和垂直居中卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53614551/