如何使bootstrap 4中的容器在给定的高度居中？
如何使bootstrap 4中的容器在给定的高度居中？
提问于 2018-07-25 22:33:44
我想在bootstrap 4中居中放置一个容器。我有一个宽度为300px的元素，
.guide-background{
background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 350px;
/*filter: brightness(50%);*/
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section id="guide" class="guide-background">
<!-- I want to center this container with id #center_it -->
<div class="container border border-danger" id="center_it">
<div class="row">
<div class="col align-self-center">
<h2 class="text-center"> <a href="" class="">Center Me</a></h2>
</div>
</div>
</div>
</section>
然后我把一个容器放在里面，然后如何把容器放在里面。我试着用网格系统做这件事。但我失败了。我真的需要你的帮助
回答 1
Stack Overflow用户
发布于 2018-07-25 23:07:25
您可以使用Bootstrap display来实现这一点，https://getbootstrap.com/docs/4.0/utilities/flex/中已经提供了flex display
.guide-background {
background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 350px;
/*filter: brightness(50%);*/
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="guide" class="guide-background d-flex align-items-center flex-colum">
<!-- I want to center this container with id #center_it -->
<div class="container border border-danger" id="center_it">
<div class="row n">
<div class="col align-self-center ">
<h2 class="text-center"> <a href="" class="">Center Me</a></h2>
</div>
</div>
</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51521546
复制相关文章
相似问题
腾讯云开发者
