如何基于一个div的高度向上两级垂直对齐中心

Question

我想知道，如果你可以采取一个div的高度，并用它来从它定位元素两级以下（孩子的孩子）。

我使用的引导和使用position: absolute处理这种尝试，但它不工作。还有我跑进简单地使用这个问题：

.prod-pod {
  top: 50%;
  transform: translateY(+50%);
}

关键是，存在使用.prod-pod两个元素，它们是不同的高度，与具有附加元件中的一个内它的col（一个左侧）。这使得在不垂直居中左边的一个。

<div class="prod-align">
  <div class="col-md-4">

    <%= link_to "Back to products", packs_path, class: "btn btn-info btn-block top-drop" %> <!-- I don't want this thing centered vertically -->

    <div class="wellington top-drop prod-pod">
      <h3 class="featurette-heading pack-name center"><%= @pack.title %></h3>
      <h4 class="text-muted align-left">License:</h4>
      <h4 class="featurette-heading align-right"><%= link_to "EULA", legal_path %></h4>
      <div style="clear: both;"></div>
      <h4 class="text-muted align-left">Category:</h4>
      <h4 class="featurette-heading align-right"><%= @pack.pack_type %></h4>
      <div style="clear: both;"></div>
      <h4 class="text-muted align-left">Price:</h4>
      <h4 class="featurette-heading align-right">$ <%= @pack.price %> <span class="text-muted CAD">USD</span></h4>
      <div style="clear: both;"></div>
      <button class="btn btn-success btn-block" id="btn-buy" type="button">Purchase This Library</button>
    </div>
  </div>

  <div class="col-md-4"> <!-- This is the tallest element inside .prod-align -->
    <div class="wellington top-drop">

    </div>
  </div>

  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <h3 class="featurette-heading pack-name center">What's inside</h3>
      <div class="pack-contents"><%= raw @pack.pack_contents %></div>
    </div>
  </div>
</div>

我试图做到的，是同时具有.prod-pod的div在.prod-align格垂直居中。

我使用花车里面的div之一为好。

Answer 1

只需使用display:flex和子元素应该有同等的高度更改父div来一个Flexbox的。现在只需使用align-items财产垂直居中的子元素的内容。

---

勾选此JSFiddle或运行下面的代码片段为我所上述一个实际的例子：

@media (min-width: 992px){ /* only apply if "col-md-" and above */
  .prod-align {
    display:flex; align-items:center;
  }
}
.col-md-4 {border: #222 solid 5px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="prod-align">
  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <p>short height elements here</p><p>short height elements here</p>
    </div>
  </div>

  <div class="col-md-4"> <!-- This is the tallest element inside .prod-align -->
    <div class="wellington top-drop">
      <p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p><p>long height elements here</p>
    </div>
  </div>

  <div class="col-md-4">
    <div class="wellington top-drop prod-pod">
      <p>medium height elements here</p><p>medium height elements here</p><p>medium height elements here</p><p>medium height elements here</p>
    </div>
  </div>
</div>

Answer 2

您可以使用display: flex;。

不论父高度，在div内容将被垂直居中。

.prod-pod {

  border: 1px solid grey;
  align-items: center; 
  display: flex;
}
.height-100{
  height: 100px;
}

.height-200{
  height: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row prod-align">
  <div class="col-md-4 col-sm-4 col-xs-4 col-lg-4">

    <div class="wellington top-drop prod-pod height-100">
qqq
    </div>
  </div>

  <div class="col-md-4 col-xs-4">
    <div class="wellington top-drop prod-pod height-100">

    </div>
  </div>

  <div class="col-md-4 col-xs-4">
    <div class="height-200 wellington top-drop prod-pod">
qqqqqqq000
    </div>
  </div>
</div>

Answer 3

要居中与CSS一个div a元素，你需要这个选项：

align-content: center;

将其放在 “COL-MD-4”。

但我建议你使用引导4.这很容易使这个版本的效果：https://getbootstrap.com/docs/4.2/utilities/flex/

我希望这会帮助你。