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仅适用于此示例，在我的应用中，它根据它延伸＃39; s内容）

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%);
    }

Answer 2

使用display:table-cell可以使其垂直对齐中间。

div:after {
content: "test";
height: 100px;
display:table-cell;
vertical-align:middle;  
}

Answer 3

您可以尝试this

CSS

div {
  width: 100px;
  height: 100px;
  background: #333;
  color: #fff;
  display: table;
}
div:after {
  content: "test";
  display: table-cell;
  vertical-align: middle;

}

Answer 4

请尝试以下操作： DEMO

<强> CSS：

div {
  width: 100px;
  height: 100px;
  background: #333;
  color: #fff;
  display:table;

}
div:after {
  content: "test";
  height: 100px;
  display:table-cell;
   vertical-align:middle;
  text-align:center;

}

使用以下内容垂直居中添加内容：after和＆＃34; content＆＃34;属性

4 个答案: