CSS Using CSS transform

Download CSS for free

Example

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.

HTML

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

CSS

.container {
  position: relative;
}

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

View example in JSFiddle

CROSS BROWSER COMPATIBILITY

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.

MORE INFORMATION

  • The element is being positioned according to the first non-static parent (position: relative, absolute, or fixed). Explore more in this fiddle and this documentation topic.
  • For horizontal-only centering, use left: 50% and transform: translateX(-50%). The same goes for vertical-only centering: center with top: 50% and transform: translateY(-50%).
  • Using a non-static width/height elements with this method of centering can cause the centered element to appear squished. This mostly happens with elements containing text, and can be fixed by adding: margin-right: -50%; and margin-bottom: -50%;. View this fiddle for more information.
Using Flexbox