tekst staje się rozmazany przy użyciu transformaty (-50%, - 50%), aby wyśrodkować sekcji

Question

używam tego kodu do centrum sekcję: (Jest to jedyny sposób mogę zrobić, aby wyśrodkować tej sekcji)

<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%); 
} 

sekcja skupia się dobrze, ale problemem jest to, że tekst staje się rozmazany, a także HR wygląda brzydko i rozmyte,
próbowałem wszystkich metod, takich jak webfont wygładzają itp, ale nie zrobił” w ogóle działa! :(
Czy ktoś może mi pomóc?
Dzięki ...

Answer 1

Z innego question, odpowiedź była

h5 { 
    background: transparent; 
} 

Nie jestem pewien, czy to jest odpowiedź w Twoim przypadku.

EDIT : Albo jak o tym?

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

Answer 2

Mam trie d wszystkie rozwiązania, czasami pracowali czasem nie. W końcu poddałem się tej metodzie, aby wyśrodkować elementy. Zamiast używać transformacji, spróbuj tego:

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

Ten kod jest centralnym elementem na ekranie. Możesz użyć Flex lub innego rozwiązania do centrowania wewnątrz elementów ...