Element transforms to half-pixel and text is now blurry

Question

So I have a Bootstrap Carousel, with a caption that I'm trying to vertically center.

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

This works fine and great until you look at the text. The element seems to land on a half-pixel, therefore, causing the text to be blurry. So I did some research for some solutions and these are all the ones I tried:

• transform-style: preserve-3d; (on parent element/div.item)
• transform: perspective(1px) translateY(-50%) translate3d(0,0,0);
• transform: translateZ(0);
• -webkit-font-smoothing: antialiased;
• backface-visibility: hidden;

Unfortunately none of the above worked. So I'm still looking for a solution to this blur. Whether it be by using plain css or not. Perhaps a Javascript form of vertical centering bootstrap caption. Heres some pictures for reference:

Text that is blurry when vertically centered:

Text that isn't blurry when not centered

Answer 1

Well after some more digging, I decided using flexbox would be the easiest way to achieve this vertical centering without blurry text (As suggested by Vestride). Fortunately it doesn't seem to cause any complications with the Bootstrap carousel when applied as such:

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

It seems like it should work for most browsers according to this. IE might suffer a little. But it worked fine for my IE 11.