如何对齐页面的卡片桌中心答案

【问题标题】：How to align card-desk center of page如何对齐页面的卡片桌中心
【发布时间】：2020-01-27 03:06:46
【问题描述】：

我需要解决问题，将卡片桌与大屏幕页面中心对齐。我正在使用引导程序 4。我当前的代码在这里https://jsbin.com/faheheboxu/edit?html,css,output

我将 .container 用于 flex，卡片桌在 flex 容器中，但不知道如何垂直对齐卡片桌中心。

尝试使用绝对高度和重量，以及填充。但它用小屏幕毁了 flex

<div class="container">
        <div class="row align-self-center">
            <div class="col-12 align-self-center">
            <div class="card-deck mb-3 mt-3 text-center">
                <div class="card box-shadow">
                    <img class="card-img-top" src="nice_house.jpg" alt="Card image cap">
                    <div class="card-header">
                        <h4 class="font-weight-normal">Best house</h4> 
                    </div>
                <div class="card-body">
                    <p1>Blablabla</p1>
                </div>   
                </div>
                <div class="card box-shadow">
                        <img class="card-img-top" src="common_house.jpg" alt="Card image cap">
                    <div class="card-header">
                        <h4 class="font-weight-normal">Common house</h4> 
                    </div>
                <div class="card-body">
                    <p class="card-text">Blablabla</p>
                    <a href="nice_flat.html" class="btn btn-primary">See more</a>
                </div>   
                </div>
                <div class="card box-shadow">
                    <img class="card-img-top" src="worst_house.jpg" alt="Card image cap">  
                    <div class="card-header">
                        <h4 class="font-weight-normal">Worst house</h4> 
                    </div>
                <div class="card-body">
                    <p1>Blablabla</p1>
                </div>   
                </div>
            </div>
            </div>
        </div>      
    </div>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

@Keplian 您只需将h-100 添加到您的html 中的第一个div 和mx-auto 到第二个div，如下所示：

<div class="container h-100">
  <div class="row align-self-center mx-auto">
    <div class="col-12 align-self-center">
      <div class="card-deck mb-3 mt-3 text-center">
        <div class="card box-shadow">
          <img class="card-img-top" src="nice_house.jpg" alt="Card image cap">
          <div class="card-header">
            <h4 class="font-weight-normal">Best house</h4> 
          </div>
          <div class="card-body">
            <p1>Blablabla</p1>
          </div>   
        </div>
        <div class="card box-shadow">
          <img class="card-img-top" src="common_house.jpg" alt="Card image cap">
          <div class="card-header">
            <h4 class="font-weight-normal">Common house</h4> 
          </div>
          <div class="card-body">
            <p class="card-text">Blablabla</p>
            <a href="nice_flat.html" class="btn btn-primary">See more</a>
          </div>   
        </div>
        <div class="card box-shadow">
          <img class="card-img-top" src="worst_house.jpg" alt="Card image cap">  
          <div class="card-header">
            <h4 class="font-weight-normal">Worst house</h4> 
          </div>
          <div class="card-body">
            <p1>Blablabla</p1>
          </div>   
        </div>
      </div>
    </div>
  </div>
</div>

它会使卡片水平居中。然后，您必须将其添加到您的 css 文件中：

body,html {
  height: 100%;
}

您现在会发现卡片水平和垂直居中。

您可以找到一个有效的示例代码here。

【讨论】：