Question

我有这样的代码：

td {
  border: 1px solid #cecece;
  position: relative;
  padding: 80px 20px;
}
.hint {
  background: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100px;
}

<table style="width:800px">
  <tr>
    <td width="50%">
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recomendation</span>
      </div>
    </td>
    <td>
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recomendationSome text with recomendationSome text with recomendation</span>
      </div>
    </td>
  </tr>
</table>

https://plnkr.co/edit/JVkXP3vNtIj4gzwwjm4B?p=preview

但我有一个问题，我无法解决：

是否可以垂直居中黄色块？（它应该绝对定位，它的高度只能是文本高度。没有行高，高度是动态的！）。现在它附在顶部，我不能以某种方式将它附加到中心。是否可以不使用JS？

Answer 1

无论内容高度如何，这都应该有效！

.hint {
  background: yellow;
  position: absolute;
  top: 0;
  height: 100%;
  left: 100px;
}
.recomendation{
  position:relative;
  top:50%;
  transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  display: block;
}

https://plnkr.co/edit/URIFrwBxvX3V7hvRT5km?p=preview

Answer 2

这是一个漂亮的小技巧：

.hint {
    background: yellow;
    position: absolute;
    top: 50%;
    left: 100px;
    transform: translate(0, -50%);
}

此处的关键是transform。

它也可以用来水平居中。

This page显示了一个很好的例子。

Answer 3

这似乎复制了您的请求：

.hint {
    background: yellow;
    position: absolute;
    top: 44%;
    left: 100px;
}

我更改了顶部位置，并删除了底部属性。

Answer 4

尝试使用flexbox。所有现代浏览器都支持它，prefixes它也适用于IE10。

.hint {
  ...
  display: flex;
  align-items: center;
}

td {
  border: 1px solid #cecece;
  position: relative;
  padding: 80px 20px;
}
.hint {
  background: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100px;
  display: flex;
  align-items: center;
}

<table style="width:800px">
  <tr>
    <td width="50%">
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recomendation</span>
      </div>
    </td>
    <td>
      <span>text</span>
      <div class="hint">
        <span class="recomendation">Some text with recomendationSome text with recomendationSome text with recomendation</span>
      </div>
    </td>
  </tr>
</table>

垂直居中的绝对块

4 个答案: