css - 我怎样才能将一个绝对位置和高度 = 100px 的 div 垂直居中在另一个具有相对位置但不是标准高度的 div 上

Question

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

通常你会使用 top:50%;

它会将它对齐到中心，但它不会考虑 div 的高度，即 100px，因此它看起来完全不以具有例如 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; }

Answer 1

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

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