基于子元素垂直居中父级 div

Question

我希望根据我的子 div 高度将我的父 div 高度居中。我的目标是有 3 个盒子，其中有一个更短但更宽的矩形，在其后面垂直居中。现在我的父div比子div更短更宽，但是我似乎无法将其垂直居中。

这是理想的结果：

这是我当前的版本（请忽略文本和框颜色的细微差别）。 :

.content {
    width: 80%;
    margin: 0px auto;
}


#container .col {
    border: 1px solid #00acd4;
    background-color: white;
    padding-top: 2em;
    padding-bottom: 2em;
    position: relative;
}

#parent {
    background-color: #f0f9fb;
    max-height: 80px;
}

#container {
    margin-top: 50px;
    margin-bottom: 50px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div id="container">
  <div id="parent">
    <div class="content">
      <div class="row">
        <div class="col ">

          <h3>$500</h3>
        </div>
        <div class="offset-1 col">

          <h3>$3500</h3>
        </div>
        <div class="col offset-1">

          <h3>50%</h3>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

除非绝对必要，否则不要使用负边距。在这种情况下，事实并非如此。在 parent 上使用 flex 和 align-items: center;

.content {
  width: 80%;
  margin: 0px auto;
}

#container .col {
  border: 1px solid #00acd4;
  background-color: white;
  padding-top: 2em;
  padding-bottom: 2em;
  position: relative;
}

#parent {
  background-color: #f0f9fb;
  max-height: 80px;
  display: flex;
  align-items: center;
}

#container {
  margin-top: 50px;
  margin-bottom: 50px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div id="container">
  <div id="parent">
    <div class="content">
      <div class="row">
        <div class="col ">

          <h3>$500</h3>
        </div>
        <div class="offset-1 col">

          <h3>$3500</h3>
        </div>
        <div class="col offset-1">

          <h3>50%</h3>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

如果没有您想要做什么的草图，我相信这就是您想要的...您可以在 col div 中设置负边距，以便将它们带到父级之外。 ..

#container {
  margin-top: 50px;
  margin-bottom: 50px;
}

#parent {
  background-color: #f0f9fb;
}

.content {
  width: 80%;
  margin: 0px auto;
}

#container .col {
  border: 1px solid #00acd4;
  background-color: white;
  padding-top: 2em;
  padding-bottom: 2em;
  position: relative;
  margin-top: -20px;
  margin-bottom: -20px;
}

<div id="container">
  <div id="parent">
    <div class="content">
      <div class="row">
        <div class="col">
          <h3>$500</h3>
        </div>

        <div class="offset-1 col">
          <h3>$3500</h3>
        </div>

        <div class="col offset-1">
          <h3>50%</h3>
        </div>
      </div>
    </div>
  </div>
</div>

分叉你的小提琴：https://jsfiddle.net/jstgermain/o6xhL92s/

***推荐如下解决方案***

@Betsy，我建议简化您的 HTML 并使用 flexbox 代替之前的小提琴解决方案。您需要确保您的行为在浏览器和设备之间保持一致。对于较小的设备，您可以使用媒体查询将大小更改为 eht col 项目。

#container {
  margin-top: 50px;
  margin-bottom: 50px;
}

#parent {
  background-color: red;
  /*#f0f9fb;*/
  display: flex;
  justify-content: space-evenly;
}

.col {
  border: 1px solid #00acd4;
  background-color: white;
  padding: 1em;
  width: 25%;
  margin: -20px auto;
}

<div id="container">
  <div id="parent">
    <div class="col">
      <h3>$500</h3>
    </div>

    <div class="col">
      <h3>$3500</h3>
    </div>

    <div class="col">
      <h3>50%</h3>
    </div>
  </div>
</div>