css - 使用 :after and "content" property 添加的内容垂直居中

Question

查看此 CSS:

div {
  width: 100px;
  height: 100px;
  background: #333;
  color: #fff;
}
div:after {
  content: "test";
  height: 100px;

}

我试图将 div:after 的内容垂直居中。我该怎么做？

我无法将 line-height 设置为 px 值，因为 div 的高度可能是动态的(height: 100px 仅用于此示例，在我的应用程序中，它会根据其内容进行拉伸(stretch))

http://codepen.io/anon/pen/ELnsJ

Answer 1

您可以使用 CSS 翻译。

见笔:http://codepen.io/jhealey5/pen/Jseyt

    div {
      width: 100px;
      height: 100px;
      background: #333;
      color: #fff;
      position: relative;
    }
    div:after {
      position: absolute;
      content: "test";
      margin-top: 50%;
      transform: translateY(-50%);
    }