缩略图不会以屏幕为中心

Question

代码：http://pastebin.com/eKKiYK9C

当我加载网站时，缩略图图像不会出现在屏幕中间。他们应该是我的数学是正确的。

Answer 1

您可以使用翻译技巧来避免数学：

body {
  padding-top: 50px;
}
.thumbnail {
  position: relative;
  overflow: hidden;
}
.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(90, 90, 90, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: left;
  color: #fff !important;
  z-index: 2;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: transparent !important;
}

<div class="centered">
  <div class="row">


    <!-- TH1 -->
    <div class="col-sm-4">
      <div class="thumbnail">
        <a href="/item/form" class="">
          <div class="caption">
            <h4 class="">Add to List</h4>
          </div>
          <img src="http://intramission.webs.com/form.jpg" alt="..." class="">
        </a>
      </div>
    </div>

    <!-- TH2 -->
    <div class="col-sm-4">
      <div class="thumbnail">
        <a href="/item/print" class="">
          <div class="caption">
            <h4 class="">View the list</h4>
          </div>
          <img src="http://intramission.webs.com/shop.jpg" alt="..." class="">
        </a>
      </div>
    </div>