元素转换为半像素，文本现在模糊。

Question

所以我有一个自带旋转木马，有一个标题，我试图垂直居中。

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

这很好，很棒，直到你看了课文。因此，元素似乎落在半像素上，导致文本变得模糊。所以我做了一些研究，找出了一些解决方案，这些都是我尝试过的：

• 转换样式:保存-3d；(在父元素/div.tem上)
• 变换:透视(1px) translateY(-50%) translate3d(0,0,0)；
• 变换: translateZ(0)；
• -webkit-字体平滑:反别名；
• 背面-能见度:隐藏；

不幸的是，上述任何一项都不起作用。所以我还在寻找解决这个模糊问题的方法。无论是否使用普通css。可能是垂直对齐引导标题的Javascript形式。以下是一些供参考的图片：

垂直居中时模糊的文本：

​

文本，当不居中时不模糊

​

Answer 1

嗯，经过进一步的挖掘，我决定使用挠曲箱是实现垂直对中而没有模糊文本的最简单的方法(如Vestride所建议的)。幸运的是，当这样应用时，它似乎不会对Bootstrap旋转木马造成任何并发症：

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

根据这的说法，它似乎应该适用于大多数浏览器。可能会受点苦。但它对我的IE 11很好。