CSS implements absolutely positioned elements centered

Front-end we often need to encapsulate some pop-up boxes, these pop-up box size is not certain, mostly with JS to achieve the center.

Now with the CSS3 can not use JS.

. Box{Background-color:Blueviolet;width:50%;Height:40%;position:Absolute; Left:50%;Top:50%;-webkit-transform:Translate ( -50%,-50%);-ms-transform:Translate ( -50%,-50%);Transform:Translate ( -50%,-50%); }

<class= "box"></div>

This time change the size of the browser arbitrarily, the element size changes, but is always centered.

I just want to say that with the CSS3, the front end is cool. A string of CSS3 code, you can omit hundreds of lines of JS code, but also less than JS bug.

CSS implements absolutely positioned elements centered