没有弹性盒的垂直居中答案

【问题标题】：Vertical centering without flexbox没有弹性盒的垂直居中
【发布时间】：2018-02-02 15:45:58
【问题描述】：

伙计们，我遇到了一个问题，我正在做的是创建一个具有叠加效果的图像网格，它只是一个具有绝对位置的容器，当有人将鼠标悬停在上面时会有一些标题和文本。
网格每行只能有 3 张图像。一切正常，但我想根据叠加效果的父元素将标题和段落文本垂直居中。我知道我可以通过使用flexbox 来做到这一点，但我想要浏览器兼容性，这就是我不使用flexbox 的原因。有没有办法不使用flexbox 来做到这一点？

*,
.row,
.col {
    box-sizing: border-box;
}

body {
    font: 1em/1.5 'Open Sans', sans-serif;
    color: #373737;
    background: #eaeaea;
}

h1,
h2,
h3 {
    text-transform: uppercase;
}

h2 {
    font-size: 1.125em;
    color: #4a89ca;
    font-weight: 600;
    margin: 0;
}

h3 {
    font-size: 1.3em;
    line-height: 1.25em;
    margin-top: .85em;
    margin-bottom: .5em;
}

p {
    font-size: .875em;
    line-height: 1.4;
    margin: 0 0 1.5em;
}

.container {
    max-width: 1260px;
    width: 94.02985075%;
    background: #fff;
    margin: auto;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.row {
    text-align: center;
    margin-bottom: 10px;
}

.row:last-child {
    margin-bottom: 0;
}

.col {
    position: relative;
    float: left;
    display: block;
}

.col + .col {
    margin-left: 1.6%;
}

.col-4 {
    width: 32.2666666667%;
    line-height: 0;
    overflow: hidden;
}

.col-4 img {
    max-width: 100%;
    display: block;
    background-color: #eaeaea;
}

.photo-overlay {
    position: absolute;
    left: 0;
    padding-left: 20px;
    padding-right: 20px;
    top: 0;
    bottom: 0;
    right: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
}

/* =================================
  Photo Overlay Transitions
==================================== */

.photo-overlay {
    opacity: 0;
    transition: opacity .5s;
}

.photo-overlay:hover {
    opacity: 1;
}

<body>
<div class="container"> <!-- Start The Container-->

    <div class="row"><!-- Start The Row-->


        <div class="col col-4">
            <img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>

        <div class="col col-4">
            <img src="http://i.imgur.com/oXvUpY5.jpg" alt="img_2.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>

        <div class="col col-4">
            <img src="http://i.imgur.com/rmM0h1h.jpg" alt="img_3.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>

    </div><!-- End The Row-->

    <div class="row"><!-- Start The Row-->
        <div class="col col-4">
            <img src="http://i.imgur.com/51LBdNS.jpg" alt="img_4.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>
        <div class="col col-4">
            <img src="http://i.imgur.com/x9EzUS5.jpg" alt="img_5.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>
        <div class="col col-4">
            <img src="http://i.imgur.com/Y0cIa13.jpg" alt="img_6.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>
    </div><!-- End The Row-->

    <div class="row"><!-- Start The Row-->
        <div class="col col-4">
            <img src="http://i.imgur.com/x3qHk2k.jpg" alt="img_7.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>
        <div class="col col-4">
            <img src="http://i.imgur.com/1cHC3hQ.jpg" alt="img_8.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>
        <div class="col col-4">
            <img src="http://i.imgur.com/lNNT4Mq.jpg" alt="img_9.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>
    </div><!-- End The Row-->

    <div class="row"><!-- Start The Row-->
        <div class="col col-4">
            <img src="http://i.imgur.com/145mdOE.jpg" alt="img_10.jpg">
            <div class="photo-overlay">
                <h3>Some Caption</h3>
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
            </div>
        </div>
    </div> <!-- End The Row-->
</div> <!-- End The Container-->
</body>

【问题讨论】：

标签： html css vertical-alignment centering

【解决方案1】：

是的，您可以使用CSS positioning properties。将您想要居中的内容包装在自己的容器中，然后使用position: absolute。

*,
.row,
.col {
  box-sizing: border-box;
}

body {
  font: 1em/1.5 'Open Sans', sans-serif;
  color: #373737;
  background: #eaeaea;
}

h1,
h2,
h3 {
  text-transform: uppercase;
}

h2 {
  font-size: 1.125em;
  color: #4a89ca;
  font-weight: 600;
  margin: 0;
}

h3 {
  font-size: 1.3em;
  line-height: 1.25em;
  margin-top: .85em;
  margin-bottom: .5em;
}

p {
  font-size: .875em;
  line-height: 1.4;
  margin: 0 0 1.5em;
}

.container {
  max-width: 1260px;
  width: 94.02985075%;
  background: #fff;
  margin: auto;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.row {
  text-align: center;
  margin-bottom: 10px;
}

.row:last-child {
  margin-bottom: 0;
}

.col {
  position: relative;
  float: left;
  display: block;
}

.col + .col {
  margin-left: 1.6%;
}

.col-4 {
  width: 32.2666666667%;
  line-height: 0;
  overflow: hidden;
}

.col-4 img {
  max-width: 100%;
  display: block;
  background-color: #eaeaea;
}

.photo-overlay {
  position: absolute;
  left: 0;
  padding-left: 20px;
  padding-right: 20px;
  top: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, .5);
}

/* =================================
  Photo Overlay Transitions
==================================== */

.photo-overlay {
  opacity: 0;
  transition: opacity .5s;
}

.photo-overlay:hover {
  opacity: 1;
}

/* NEW */
.photo-overlay:hover > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<div class="container">
  <div class="row">
    <div class="col col-4">
      <img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">
      <div class="photo-overlay">
        <div><!-- START NEW CONTAINER -->
          <h3>Some Caption</h3>
          <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
        </div><!-- END NEW CONTAINER -->
      </div>
    </div>
  </div>
</div>

以下是对这种居中方法的解释：

Element will not stay centered, especially when re-sizing screen

这是使用vertical-align 和表格属性的另一种方法：

Vertically center two elements within a div

【讨论】：

【解决方案2】：

将.photo-overlay 中的文本放入另一个 div，并为该 div 赋予以下样式：

position: absolute;
top: 50%;
transform: translateY(-50%);

【讨论】：