使用 transform(-50%,-50%) 使部分居中时，文本变得模糊答案

【问题标题】：Text gets blurry when using transform(-50%,-50%) to center the section使用 transform(-50%,-50%) 使部分居中时，文本变得模糊
【发布时间】：2015-11-23 11:27:06
【问题描述】：

我使用此代码将一个部分居中：（这是我可以做的唯一方法来居中此部分）

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

该部分居中很好，但问题是文本变得模糊，并且 hr 看起来又丑又模糊，
我已经尝试了所有方法，例如 webfont smooth 等，但根本没有用！ :(
谁能帮帮我？
谢谢...

【问题讨论】：

我在 Chrome 和 Firefox 上测试过，文字对我来说并不模糊...
相关：stackoverflow.com/questions/6411361/…
你不能使用边距或其他东西来居中吗？
@AhsN 在我使用它的情况下，它非常模糊和丑陋，浏览器无关紧要，它在 Chrome、Opera 和 Firefox 中模糊......
你可以发布图片或小提琴吗？正如@Ahs N 所说，找不到文本或小时的任何问题。

标签： html css transform blur

【解决方案1】：

来自不同的question，答案是

h5 {
  background: transparent;
}

不确定这是否是您的答案。

编辑：或者这个怎么样？

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

【讨论】：

该死。希望我能看到我身边的模糊
使用像素值而不是百分比进行变换怎么样？
我正在使用 transform(-50%) 使高度和宽度未知的部分居中，如何使用像素值使部分居中？有办法吗？
除非父级有定义的高度和宽度，否则我不知道该怎么做。
你知道，我不能公开分享这个项目，你能给我一个电子邮件地址或其他什么，以便我可以把文件发给你吗？非常感谢人:)

【解决方案2】：

我已经尝试了所有解决方案，有时它们有效，有时无效。最后我放弃了使用这种方法来居中元素。而不是使用转换试试这个：

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

此代码将主要元素置于屏幕中心。您可以使用 flex 或其他解决方案将内部元素居中...

【讨论】：