Page Element Center Strategy _ (5) unknown element width Height Vertical Center

Off Topic

Before, we have to adapt to the global center, need to use JS or JQ to achieve, now have CSS3 can save a lot of Kung fu, why so say!!
Please see the comparison:

The traditional absolute centering

  #container  {position :         Abosolute  ; top :         %  ; left :         %  ; margin-left : -contains half of the block width (e.g.-<        Span class= "Hljs-number" >300  px)  ; margin-top : -contains half of the block height    ;     

This is the absolute centering of the containing block, but one problem is that the wide height is not adaptive (requires a fixed width) ... For example, the dynamic increase of data, with this is not appropriate .... This is the way to compromise is to use JS or JQ to solve

The new Absolute Center

(Requires a newer browser, with a CSS3 attribute)
Property Name: Transform:translate (Support ie9+, other browsers are basically supported);

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

Let's analyze this sentence transform: translate(-50%, -50%); ;
That means, pull back half the width of the element that called the attribute;

Transform:translate There are three kinds of writing, I write the kind of containing x, Y, the first parameter is to pull around the x-axis, the second is to pull up and down the Y axis

The other two types of parameters are:

1. transform:translateX(-50%), only for the x-axis;
2. transform:translateX(-50%),只针对Y轴;

With this attribute, it is possible to achieve an unknown wide-height adaptive absolute centering!!! Isn't it great!!!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Page Element Center Strategy _ (5) unknown element width Height Vertical Center