Wie kann ich vertikal Zentrum: nach Inhalt

Question

Ich verwende: nach Inhalt wie so

.img-div:after { 
    content: ".01"; 
    position: absolute; 
    width: 76.9%; 
    height: 55%; 
    top: 10%; 
    right: 2.5%; 
    padding: 20px; 
    background-color: #6758ef; 
    opacity: .8; 
    font-size: 59px; 
    font-weight: 300; 
    color: #fff; 
    text-align: center; 
} 

Ich will wissen, dass, wie kann ich den Inhalt vertikal Eigenschaft zentrieren.

HINWEIS: Ich kann nicht verwendet werden: vor, weil ich es bereits für andere Zwecke

https://jsfiddle.net/tfkt5411/

Answer 1

Dieses Versuchen:

.img-div:after { 
    line-height:197px; 
    //Other codes... 
} 

197px gleicher Höhe ist (55%).

Siehe Demo

Answer 2

Sie die width angeben können, height und background für .img-div dann können Sie :after verwenden einfach den Inhalt vertikal zu zentrieren und horizontal, überprüfen Sie die updated fiddle.

this helps :)

Answer 3

.img-div-parent{ 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    background-color: #6758ef; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.img-div:after { 
 
    content: ".01"; 
 
    position: relative; 
 
    width: 76.9%; 
 
    height: 55%; 
 
    right: 2.5%; 
 
    opacity: .8; 
 
    font-size: 59px; 
 
    font-weight: 300; 
 
    color: #fff; 
 
    text-align: center; 
 
}

<div class="img-div-parent"> 
 
    <div class="img-div"> 
 
    </div> 
 
</div>

Answer 4

.img-div { 
 
    height: 300px; 
 
    width: 300px; 
 
} 
 

 
.img-div:after { 
 
    content: ".01"; 
 
    width: 76.9%; 
 
    height: 55%; 
 
    background-color: #6758ef; 
 
    opacity: .8; 
 
    font-size: 59px; 
 
    font-weight: 300; 
 
    color: #fff; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="img-div"></div>