Text gets blurry when using transform(-50%,-50%) to center the section

Question

I use this code to center a section : (This is the only way I can 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 gets blurry and also the hr looks ugly and blurry,
I have tried all methods like webfont smooth etc, but didn't work at all ! :(
Can anyone help me ?
Thanks ...

Answer 1

From a different question, the answer was

h5 {
  background: transparent;
}

Not sure if that 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;
}