时间戳

首页 > 解决方案 > 如何在给定高度将引导程序 4 中的容器居中？

css - 如何在给定高度将引导程序 4 中的容器居中？

问题描述

我想在引导程序 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>

然后我在里面放了一个容器，然后怎么可能把容器放在里面。我试着用网格系统来做。但我失败了。真的需要帮助

标签： csstwitter-bootstrapbootstrap-4

解决方案

您可以flex为此使用 display，Bootstrap 已在https://getbootstrap.com/docs/4.0/utilities/flex/

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

推荐阅读