变换：翻译（-50％，-50％），导致模糊的文本

我有一个需要为中心的格 - 但使用变换：翻译（-50％，-50％），导致模糊的文本

top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

导致在div模糊的一切。我知道这个问题已经在这里问了很多，但没有任何解决方案（4或5个帖子）为我工作。有没有任何目前的解决方案，甚至是另一种正确居中div的方法？

来源

2017-02-25 user7548189

你为什么不使用柔性股利和保证金自动 – kobbycoder

里面你可以请列出你已经尝试WHA选项并创建一个代码段。 – Zze

请提供您的html。正如你可能已经注意到的那样，根据内容的不同，有很多方法可以集中某些东西。所以，请帮助我们帮助您，并确切显示您想要的内容。 – wscourge

您可以在父级上使用display: flex; align-items: center; justify-content: center;来居中子元素。

div { 
 
background: black; 
 
color: white; 
 
width: 100px; 
 
height: 100px; 
 
display: flex; 
 
justify-content: center; 
 
align-items: center; 
 
}

<div> 
 
    <span>centered</span> 
 
</div>

来源

2017-02-25 21:06:31

它是把元素中心的最佳方式之一，但它需要补充的位置是：绝对的。

top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
position:absolute;

然后将工作

来源

2017-02-25 21:52:42

变换：翻译（-50％，-50％），导致模糊的文本

回答

相关问题