CODEWITHSUNDEEP
htmlcss
user7548189
user7548189

Reputation: 1016

transform: translate(-50%, -50%) causing blurry text

I have a div that needs to be centered - but using 

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

Causes everything in the div to blur. I know this question has been asked a lot here, but none of the solutions (on 4 or 5 posts) have worked for me. Is there any current solution or even another way to center the div correctly?

Upvotes: 3

Views: 1885

Answers (2)

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

It is one of the best way to bring element to center, but it needs to add position:absolute.

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

then will work

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

You can use display: flex; align-items: center; justify-content: center; on the parent to center the child element.

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

Upvotes: 6

Related Questions