元素转换为半像素，文本现在变得模糊答案

【问题标题】：Element transforms to half-pixel and text is now blurry元素转换为半像素，文本现在变得模糊
【发布时间】：2017-09-19 20:40:04
【问题描述】：

所以我有一个 Bootstrap Carousel，带有一个我试图垂直居中的标题。

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

在您查看文本之前，这很好用。因此，该元素似乎落在半像素上，导致文本模糊。所以我对一些解决方案进行了一些研究，这些都是我尝试过的：

变换样式：preserve-3d；（在父元素/div.item 上）
变换：透视图(1px) translateY(-50%) translate3d(0,0,0);
转换：translateZ(0);
-webkit-font-smoothing：抗锯齿；
背面可见性：隐藏；

不幸的是，以上都没有奏效。所以我仍在寻找解决这种模糊的方法。无论是否使用纯 CSS。也许是一种 Javascript 形式的垂直居中引导标题。这里有一些图片供参考：

垂直居中时文字模糊：

不居中时不模糊的文字

【问题讨论】：

不幸的是transform，使用百分比时无法避免亚像素精度。如果您可以将标题的高度设置为偶数像素，那可能会起作用。否则，您将不得不使用不同的方法来使您的内容居中。 flexbox 很擅长这个。
你试过只使用transform: perspective(1px) translateY(-50%)吗？ ...另外，对于 webkit 浏览器，重置模糊可以创造奇迹-webkit-filter: blur(0px)

标签： html css twitter-bootstrap

【解决方案1】：

经过更多的挖掘，我决定使用flexbox 将是实现垂直居中而不模糊文本的最简单方法（正如 Vestride 所建议的那样）。幸运的是，当这样应用时，它似乎不会对 Bootstrap 轮播造成任何并发症：

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

根据this，它似乎应该适用于大多数浏览器。 IE 可能会受到一点影响。但它适用于我的 IE 11。

【讨论】：