<分区>
标签 css bootstrap-4
<分区>
我无法同时水平和垂直对齐以下内容。
有人能告诉我最好的方法吗？
<div class="container">
<div class="row">
<div class="col-md-4">
<img width="300" src="../assets/medlogo.png">
<h1 class="text-center login-title">Acessar o programa</h1>
<div class="account-wall">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in</button>
</form>
</div>
</div>
</div>
</div>
谢谢
最佳答案
Bootstrap4 现在使用 css Flexbox，所以你可以使用相同的。 Flexbox 具有开箱即用的垂直和水平对齐支持。
基本上， flex 盒容器可以将 flex-direction 作为 row(默认值)或 column。对于前者，属性 align-items 可用于垂直对齐其子项，而 justify-content 可用于水平对齐。对于后者，align-items 用于水平对齐，justify-content 用于垂直对齐。
您可以在此处阅读有关 Flexbox 的更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于css - Bootstrap 4 - 水平和垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46637199/