引导程序列中的居中按钮。屏幕最小化时出现重叠

Question

我已将我的按钮居中在我的引导栏之一中。一切正常，直到屏幕变小，并且按钮与其他包含文本的列重叠。当我在边际上玩耍时，事情变得更加奇怪。

.center-btn-container {
  position: relative;
}

.paragraph-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 214px;
  height: 40px;
  border-radius: 5px;
  letter-spacing: 2px;
  color: white;
  background-image: linear-gradient(to right, #F36819, #F7931D);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
  <span class="col-1-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.</span>
</div>

<div class="col-md-6 center-btn-container">
  <button type="button" class="btn paragraph-btn">Button</button>
</div>
</div>

Answer 1

这是因为右列塌陷并且没有高度，因为它的子代（按钮）被完全定位并且不占用任何空间+翻译-50％使得按钮上升了臀部内部高度的50％高度为1px的容器（默认为引导程序）。

只需将该列的最小高度设置为40px（按钮的高度），就可以了。 （我在选择器中添加了“ .col-md-6”，因此它将覆盖引导程序最小高度1px）

.center-btn-container {
  position: relative;
}
.col-md-6.center-btn-container {
    min-height: 40px;
}
.paragraph-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 214px;
  height: 40px;
  border-radius: 5px;
  letter-spacing: 2px;
  color: white;
  background-image: linear-gradient(to right, #F36819, #F7931D);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
  <span class="col-1-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.</span>
</div>

<div class="col-md-6 center-btn-container">
  <button type="button" class="btn paragraph-btn">Button</button>
</div>
</div>