垂直中心内容补充：后和“内容”属性

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只是在这个例子中，在我的应用程序是根据它延伸的内容）

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; 

}