Bootstrap 4使元素在粘顶类中垂直居中

时间：2019-11-01 13:47:35

标签： html css bootstrap-4

我试图实现的目标是使div类的元素位于sticky-top的中心，我使用这些类获得了成功，但没有成功：

d-flex justify-content-center align-items-center flex-column


body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top">
        <div class="d-flex justify-content-center align-items-center flex-column">
          <div>I should be center vertically</div>
        </div>
      </div>
    </div>
  </div>
</div>

如您所见，元素不是垂直居中，这是我想要得到的，并且不想使居中元素居中，它们应该位于彼此下方。

预先感谢

编辑：这是我的目标的Photoshop版本：

enter image description here

2 个答案:

答案 0 :(得分：1)

只需将h-100类添加到sticky-top及其内部div。

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  overflow: auto;
}

#element-2 {
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top h-100">
        <div class="d-flex h-100 justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
        </div>
      </div>
    </div>
  </div>
</div>

如果没有必要，您也可以删除粘性顶部的内部div：

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  overflow: auto;
}

#element-2 {
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top d-flex h-100 justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
      </div>
    </div>
  </div>
</div>

编辑1 抱歉，我没有注意到粘性问题

我使用了第二个解决方案：

.sticky-top{
  height:100vh;
}


body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}
.sticky-top{
  height:100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top d-flex justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
          <div class="text-center">I should be center vertically</div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：-1)

不确定我是否理解要求，但这是您想要的吗？

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top">
        <div class="d-flex justify-content-center align-items-center">
          I should be in center
           </div>
          <div class="d-flex justify-content-center align-items-center">
          I should be in center too!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

注意：我所做的唯一区别是在其自己的div中添加了文本

         <div class="d-flex justify-content-center align-items-center">
          I should be in center
         </div>
         <div class="d-flex justify-content-center align-items-center">
          I should be in center too!
         </div>
相关问题
最新问题