Page 93 - CSS

Chapter 11: Centering

Examples

Using CSS transform

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.

https://riptutorial.com/ 71