The use of the transform of the CSS center effect

Simple and efficient, while supporting variable heights. Specifies the Transform:translate ( -50%,-50%) and top:50% with the vendor prefix for the content to center the content block.

CSS code copy content to clipboard

. is-transformed {

width:50%;

Margin:auto;

Position:absolute;

top:50%; left:50%;

-webkit-transform:translate ( -50%,-50%);

-ms-transform:translate ( -50%,-50%);

Transform:translate ( -50%,-50%);

}

Benefits:

Content height Variable

Small amount of code

Also note:

IE8 not supported

Need to write vendor prefix

Will conflict with other transform styles

There are problems with edges and font rendering in some cases