基于子元素垂直居中父div

我希望根據我的孩子 div 高度來居中我的父 div 高度。我的目標是讓 3 個盒子在其后面垂直居中，并帶有一個較短但較寬的矩形。現在我的父 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>

uj5u.com熱心網友回復：

如果沒有你想要做什么的草圖，我相信這就是你想要的......你可以在coldiv 中設定一個負邊距，以便將它們帶到父級之外......

#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/

uj5u.com熱心網友回復：

除非絕對必要，否則不要使用負邊距。在這種情況下，它不是。與_ flex_parentalign-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>

uj5u.com熱心網友回復：

@Betsy，我建議簡化您的 HTML 并在之前的小提琴解決方案中使用 flexbox。您需要確保您的行為在瀏覽器和設備之間保持一致。您可以使用媒體查詢將大小更改col為較小設備的 eht 專案。

#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>

標籤：html css 定心

上一篇：僅顯示基于選中的從陣列回傳的唯一項

下一篇：js腳本僅適用于一個元素，僅適用于第一個元素