Absolute centered DIV

#yourdiv { position: relative; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); text-align: center; }
Centering a DIV horizontally and vertically

9 Responses

It seems like the css transform make the element a little blurry with this solution.
How do you mean a little blurry? It's not the case in my websites where I used this solution. Do you have an example?
@Luca Sometimes, with this solution, the element can be placed on a "half pixel", which can cause blur. Giving your parent div a preserve-3d should fix the problem. Like this:

.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
@Aleksander Lyngesen ok I understand now. Thank you Aleksander I'll take note about it ;)
Thank you for your very useful solution
@Luca Hey Luca, you can edit your snippet and see the versioning.
Not work. Centered only for horizontal
@Vyacheslav CH You need to have a parent div with some defined height, even if it's just your html and body.
@Vyacheslav CH or you set the position on absolute:

position: absolute;
Oh thanks!

I am useing this:
.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 400px;
max-width: 500px;
padding: 40px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.