Element verwandelt, um Halbpixel und Text ist jetzt verschwommen

Question

So habe ich ein Bootstrap-Karussell, mit einem Titel, den ich versuche Zentrums in vertikale Richtung.

HTML:

<div class="item image1 active"> 
    <div class="carousel-caption"> 
     <h1 class="color-primary-0">Create Memories</h1><br> 
     <p class="color-primary-2">This is where a bunch of cool lorem ipsum goes</p><br> 
     <a href="#"><button class="button1 bg-primary-2"><span>Watch Video</span></button></a> 
    </div> 
</div> 

CSS:

div.carousel-caption{ 
top: 50%; 
transform: translateY(-50%); 
bottom: initial; 
} 

Dies funktioniert gut und groß, bis Sie auf den Text zu suchen. Das Element scheint auf einem halben Pixel zu landen, wodurch der Text unscharf wird. Also habe ich ein paar Nachforschungen für einige Lösungen und das sind alle, die ich versucht habe:

• transform-style: preserve-3d; (Auf Elternelement/div.item)
• Transformation: Perspektive (1 Pixel) translateY (-50%) translate3d (0,0,0);
• Umwandlung: translateZ (0);
• -webkit-font-smoothing: antialiased;
• backface-visibility: versteckt;

Leider keine der oben genannten gearbeitet. Also suche ich immer noch nach einer Lösung für diese Unschärfe. Sei es mit einfachem CSS oder nicht. Vielleicht eine Javascript-Form der vertikalen Zentrierung der Bootstrap-Beschriftung. Heres ein paar Bilder als Referenz:

Text, verschwommen ist, wenn sie vertikal zentriert:

Text, der nicht verschwommen ist, wenn nicht zentriert

Answer 1

Nun nach etwas mehr graben, ich entschieden mit flexbox wäre der einfachste Weg, um diese vertikale Zentrierung ohne undeutlichen Text zu erreichen (wie von Vestride vorgeschlagen). Zum Glück scheint es keine Komplikationen mit Bootstrap-Karussell zu verursachen, wenn sie als solche angewendet:

div.carousel-caption{ 
    position: static; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    justify-content: center; 
    align-items: center; 
} 

Es scheint, wie es für die meisten Browser nach this funktionieren sollte. IE könnte ein wenig leiden. Aber es funktionierte gut für meine IE 11.