Use translate to set elements vertically horizontally centered

Before the mobile phone project, using a lot of custom pop-up window, and then asked to be vertical horizontal to the center, the beginning of the time to use Calc to calculate, but CSS3 Calc compatibility is not very good, so later on the use of JS to calculate,

Today by chance to see someone else's way, instantly feel that they have done a lot of useless ~ ~

Translate,translate,translate,translate.

Simple CSS code can be implemented:

. align{width:300px;       height:300px;       border:5px solid #666;       Position:absolute;       Left:%;       Top:%;        -webkit-transform:translate (-%,-)  //This is the key} 

And after testing,translateThe percentage used in the function is the content area of the element, the filler (padding), Border (border) is calculated for the standard, which means that no matter what padding or border we add will not affect the outcome.

At the same time, in terms of animation, translate   to animate smoother than an absolutely-positioned animation.

The reason for this is that an animated effect using absolute positioning is subject to displacement using pixels (px), whereas translate animations using functions can be shifted in smaller units without being affected by the pixels.

In addition, an absolutely-positioned animation effect is calculated entirely using the CPU, while using theThe translate animation of the function is the use of the GPU, so the visual use translate of the function animation can have a higher number of frames than an absolute positioning animation.

Use translate to set elements vertically horizontally centered