没有弹性盒的垂直居中

Posted

技术标签:

【中文标题】没有弹性盒的垂直居中【英文标题】：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" >
            <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" >
            <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" >
            <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" >
            <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" >
            <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" >
            <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" >
            <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" >
            <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" >
            <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" >
            <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>

【问题讨论】：

【参考方案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" >
      <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%);

【讨论】：

以上是关于没有弹性盒的垂直居中的主要内容，如果未能解决你的问题，请参考以下文章

关于flex布局垂直居中

弹性flex 垂直剧中 和 水平居中 小记

vue 弹性布局 实现长图垂直居上，短图垂直居中

如何垂直居中弹性框项目的内容

垂直居中并左对齐一列弹性项目

如何在弹性项目中垂直居中文本？