html – 没有flexbox的垂直居中

2019年7月28日 124次阅读

伙计我正面临一个问题,我正在做的是创建一个具有叠加效果的图像网格,这不仅仅是一个具有绝对位置的容器,当有人悬停在其上时会有一些标题和文字.网格每行只能有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>

最佳答案 是的,您可以使用
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和table属性的另一种方法：

> Vertically center two elements within a div

点赞