基于 child 元素垂直居中 parent div

Question

我希望根据我的 child div 身高使我的 parent div 身高居中。我的目标是让 3 个盒子有一个更短但更宽的矩形，在它后面垂直居中。现在我的 parent div 比 children 更短更宽，但是我似乎无法将它垂直居中。

这是理想的结果：

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

.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/bootstrap@4.5.3/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>0</h3>
        </div>
        <div class="offset-1 col">

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

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

Answer 1

没有你想要做什么的草图，我相信这就是你想要的......你可以在 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>0</h3>
        </div>

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

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

分叉你的fiddle：https://jsfiddle.net/jstgermain/o6xhL92s/

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

@Betsy，我建议简化您的 HTML 并在您的 fiddle 之前的解决方案上使用 flexbox。您需要确保您的行为在浏览器和设备之间保持一致。对于较小的设备，您可以使用媒体查询将大小更改为 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>0</h3>
    </div>

    <div class="col">
      <h3>00</h3>
    </div>

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

Answer 2

除非绝对必要，否则不要使用负边距。在这种情况下，它不是。在 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/bootstrap@4.5.3/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>0</h3>
        </div>
        <div class="offset-1 col">

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

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

基于 child 元素垂直居中 parent div

Center parent div vertically based on child element

html

css

centering