垂直居中"almost"有——求完美

Question

我已经设法使 div 中的文本垂直居中，但它仍然不够完美 - 我希望它能得到完善。

最成功的关键 CSS 是这个（我在 URL 中找到了解决方案）：

body.page-template-template-portfolio .caption,
body.single-portfolio .caption {
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    border-bottom: none;

    /* THE MAGIC (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/)  */  
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}

body.page-template-template-portfolio .fancybox-thumb a {
        text-align: center;
}

这是一个 jsfiddle 的情况（我已经从我的 WordPress 主题中添加了足够多的 CSS 以使其表现得像在我的网站上一样）：

https://jsfiddle.net/cosmocanuck/ukro9qfv/41/

正如您希望看到的那样，在悬停时，标题有点高，因为 p.captionTitle 浮动到其封闭的 .caption div 的顶部，完全垂直居中。但是当我尝试添加这个时，为了使内部 div 也垂直居中：

p.captionTitle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

奇怪的是，虽然它看起来是垂直的，但现在 - 如果标题只有一行，文本是 left-aligned，并且只有当有两行时它才会保持水平居中。那是什么？

希望有人指教...谢谢！

亚当

Answer 1

从 .folio-grid .caption 选择器中删除 float 和 height css 属性。 float 超出 absolute 定位，从 p 中删除默认 margin 并且 top: 0; bottom: 0 属性也是多余的。

html {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0
}

p {
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.folio-grid {
  list-style: none;
  float: left;
  z-index: 8;
  overflow: visible !important;
}

.folio-grid li {
  margin: 60px 17px 0;
  float: left;
}

.fancybox-thumb img {
  margin: 0 !important;
  float: none !important;
  vertical-align: top;
}

.folio-grid img {
  border-radius: 50%;
  width: 100%;
  max-width: none;
}

.folio-grid span {
  font-size: 12px;
  line-height: 16px;
  display: inline-block;
  font-weight: 500;
  color: #656565;
}

.fancybox-thumb {
  display: inline-block;
  position: relative;
}

.fancybox-thumb span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/* VERTICALLY CENTER THE ROLLOVER PORTFOLIO TITLES  */

.folio-grid .caption {
  padding: 19px 0 19px;
  text-align: center;
}

.caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 1em !important;
}

p.captionTitle {}


/* ROLLOVER CAPTIONS INSIDE THE THUMBNAILS (also changed order of HTML elements in template-portfolio.php)  */

.caption {
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  border-bottom: none;
  padding: 19px 0 19px;
  /* THE MAGIC (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/)  */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.fancybox-thumb a {
  text-align: center;
}

.fancybox-thumb:hover .caption,
.fancybox-thumb:hover .caption {
  visibility: visible;
  opacity: 1;
  background-color: transparent !important;
}


/* Keep everything transparent */

.fancybox-thumb .caption,
.fancybox-thumb .caption p,
.fancybox-thumb .caption span {
  background-color: transparent !important;
}

.fancybox-thumb:hover .caption p {
  background-color: transparent !important;
}

.fancybox-thumb:hover .caption span {
  background-color: transparent !important;
}


/* Text colour and stylin' */

.caption p {
  color: white;
  margin: 0;
}

.fancybox-thumb .caption span {
  font-family: 'Helvetica Neue LT W01_71488914';
  font-size: 1.2em;
  color: white;
}

<ul id="portfolio" class="folio-grid cthree clearfix">

  <li class="item">

    <a href="http://unicyclecreative.com/unicycle/portfolio/rebrand-a-better-coatings-company-broda-wood-stain/?id=1689" class="clearfix">

      <div class="fancybox-thumb">
        <img src="http://unicyclecreative.com/unicycle/wp-content/uploads/2016/02/portfolio-circle-BRODA-275x275.jpg" width="275" height="275" alt="Rebrand a better coatings company: BRODA Wood Stain" />
        <span></span>

        <div class="caption">
          <p class="captionTitle">Rebrand a better coatings company: BRODA Wood Stain</p>
        </div>

      </div>

    </a>
  </li>

  <li class="item">

    <a href="http://unicyclecreative.com/unicycle/portfolio/london-drugs-whats-the-green-deal-4/?id=1689" class="clearfix">

      <div class="fancybox-thumb">
        <img src="http://unicyclecreative.com/unicycle/wp-content/uploads/2016/02/portfolio-circle-GreenDeal-275x275.jpg" width="275" height="275" alt="London Drugs What&#8217;s the Green Deal?" />
        <span></span>


        <div class="caption">
          <p class="captionTitle">London Drugs What&#8217;s the Green Deal?</p>
        </div>


      </div>


    </a>

  </li>
</ul>

垂直居中"almost"有——求完美

Vertical centering "almost" there - seeking perfection

css

centering