變換：翻譯（-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％），導致模糊的文本

回答

相關問題