Using CSS transform

suggest change

CSS transforms are based on the size of the elements so if you don’t know how tall or wide your element is, you can position it absolutely 50% from the top and left of a relative container and translate it by 50% left and upwards to center it vertically and horizontally.

Keep in mind that with this technique, the element could end being rendered at a non-integer pixel boundary, making it look blurry. See this answer in SO for a workaround.


<div class="container">
  <div class="element"></div>


.container {
  position: relative;
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

View example in JSFiddle


The transform property needs prefixes to be supported by older browsers. Prefixes are needed for Chrome<=35, Safari<=8, Opera<=22, Android Browser<=4.4.4, and IE9. CSS transforms are not supported by IE8 and older versions.

Here is a common transform declaration for the previous example:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

For more information see canIuse.


Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents