How can I vertically center :after content

Question

I am using :after content like 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;
}

I want to know that how can I vertically center the content property.

NOTE: I cannot use :before because I have it already for other purpose

https://jsfiddle.net/tfkt5411/

Answer 1

 .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 2

Try This:

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

197px is equal height(55%).

See Demo

Answer 3

you can specify the width , height and background for .img-div then you can use :after easily to center the content vertically and horizontally as well, check the updated fiddle .

Hope this helps :)

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>