如何将具有绝对位置且高度 = 100px 的 div 垂直居中在另一个具有相对位置但不具有标准高度的 div 上答案

【问题标题】：How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height如何将具有绝对位置且高度 = 100px 的 div 垂直居中在另一个具有相对位置但不具有标准高度的 div 上
【发布时间】：2013-11-28 10:21:49
【问题描述】：

如何将一个绝对位置和高度 = 100px 的 div 垂直居中在另一个具有相对位置但不具有标准高度的 div 上（取决于图像大小）。

通常你会使用 top:50%;

它会将它与中心对齐，但它不会考虑 100px 的 div 的高度，因此它看起来完全不在具有例如 250px 高度的图像的中心。

HTML

  <div class="imgArea">
    <div class="img">
      <img class="img-responsive" src="http://img2.demotywatoryfb.pl//uploads/201311/1384452727_cipnyk_600.jpg" alt="img">
      <div class="btn-panel">
        <button type="button" class="btn btn-default btn-lg imgBtnLeft">
          <span class="glyphicon glyphicon-chevron-left"></span> Prev
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnRight">
           Next <span class="glyphicon glyphicon-chevron-right"></span>
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnLeft">
          <span class="glyphicon glyphicon-thumbs-down"></span> Słabe
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnRight">
           Mocne <span class="glyphicon glyphicon-thumbs-up"></span>
        </button>
      </div>
    </div>
    <p>Tutaj opis do zdjęcia który mówi wszystko!</p>
  </div>

CSS

.imgArea {
  max-width: 800px;
  padding-bottom: 100px; }

.img {
  position: relative; }
  .img .btn-panel {
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 999; }

.imgBtnLeft {
  float: left;
  color: black;
  clear: left; }

.imgBtnRight {
  float: right;
  color: black;
  clear: right; }

【问题讨论】：

提供小提琴以查看确切的问题。

标签： css

【解决方案1】：

您可以使用此 css 规则。元素的宽度和高度无关紧要；它将在屏幕上居中。

.centerDiv {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

【讨论】：

【解决方案2】：

我刚刚解决了。抱歉打扰各位了。

.img {
  position: relative; }
.img .btn-panel {
    position: absolute;
    margin-top:-50px; //did the job when combined with top 50%
    top: 50%;
    width: 100%;
    z-index: 999; }

工作！

【讨论】：