Text becomes blurry when using conversion (-50%, - 50%) to center the section

Question

I use this code to center the section: (This is the only way to do to center this section)

<div class="clock-section"> <h5 id="clock-title">We are coming really soon</h5> <hr class="hr" id="cdhr"> </div> 

CSS:

 .clock-section { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } 

The section is centered well, but the problem is that the text is blurry, and also hr looks ugly and blurry,
I tried all the methods like webfont smooth, etc., but didn’t work at all! :(
Can someone help me?
Thanks...

Answer 1

From another question, the answer was

 h5 { background: transparent; } 

Not sure if this is the answer in your case.

EDIT: Or how about this?

 .parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } 

Answer 2

I tried all the solutions, sometimes they worked sometimes. Finally, I refused to use this method to center the elements. Instead of using transform, try the following:

 width: 50vw; height:50vh; position: fixed;/*or absolute*/ margin:25vh 25vw; 

This code centers the main element on the screen. You can use flex or another solution to center the inner elements ...