html - 如何在列表中居中高度未知的对象？

Question

似乎无论我做什么，我都无法让一些黑色背景的文本垂直居中。问题是有时文本在一行上，有时在两行甚至三行上。我试图让它自动调整，但我做不到。

我已经尝试了很多方法，例如 here. 中列出的那些

这是我要居中的代码:

.infogrid {
  display: inline-block;
  position: relative;
  bottom: 45px;
  right: 0;
  margin: 0px 1% -100% 1%;
  width: 98%;
  background-color: #F6F6F6;
}
.infogrid ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
.infogrid li {
  display: inline-block;
  position: relative;
  background-color: white;
  width: 320px;
  margin: 1vw;
  height: 320px;
  transition: transform 0.4s;
  box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
  transform: scale(1.05, 1.05);
}
.tilewrappertext {
  display: inline-block;
  color: white;
  visibility: hidden;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-family: "Century Gothic", "Arial", "Sans-Serif";
  background-color: black;
  opacity: 0.75;
  font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
  visibility: visible;
}

<div class="infogrid">
  <ul>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile1.png" width="96%">
        <h3 class="tilewrappertext">Half price facials</h3>
      </div>
    </li>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile2.png" width="96%">
        <h3 class="tilewrappertext">1/4 off massages</h3>
      </div>
    </li>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile3.png" width="96%">
        <h3 class="tilewrappertext">20/3 off hot rocks</h3>
      </div>
    </li>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile4.png" width="96%">
        <h3 class="tilewrappertext">20/3 off nails</h3>
      </div>
    </li>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile5.png" width="96%">
        <h3 class="tilewrappertext">Free use of sauna with treatment</h3>
      </div>
    </li>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile6.png" width="96%">
        <h3 class="tilewrappertext">Free use of jacuzzi with treatment</h3>
      </div>
    </li>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile7.png" width="96%">
        <h3 class="tilewrappertext">1/20 off eyes</h3>
      </div>
    </li>
    <li>
      <div id="tilewrapper">
        <img id="automargins" src="content/tile8.png" width="96%">
        <h3 class="tilewrappertext">1/20 off hair</h3>
      </div>
    </li>
  </ul>
</div>

将鼠标悬停在图像上时会显示文本。

Answer 1

由于你的 li 已经是位置相关的，你可以将以下 css 规则添加到 h3 以使其在 li 中垂直居中。:

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

此处示例:http://codepen.io/nicerhugs/details/dMGMEv/

top 会将 h3 的顶部移动到 li 的一半位置，并且变换将校正 li 本身的高度。摆脱边缘将带走那个奇怪的神秘空间，使它看起来比实际要低。