A detailed introduction to the CSS3 of the transform attribute in the vertical horizontal center of the div variable width and height

The role of Transform

The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move , or skew elements. (W3cschool)

Compatibility of Transform

The compatibility of transform is still relatively optimistic. IE9 The following is incompatible, IE9 supports instead of the-ms-transform attribute but only supports 2D conversions.

Google and Safari support replace the-webkit-transform attribute. IE9 above, Firefox and open Gate are compatible.

Presumably everyone in the actual project will meet the problem of P indefinite width and high vertical horizontal center. Remember the previous use JS to achieve.

In fact, there are several ways to implement CSS. But the individual feels that using transform to achieve simpler and more convenient is incompatible IE9 the following browsers.

Now to show you the examples of recent projects

At the time of writing the Carousel, the dots buttons are based on the number of pictures to determine the number of buttons. As a result, the width of these button elements cannot be fixed while writing the code, and it must be centered.

       <p class= "Scroll" >            <p class= "Scroll_pic" >                <a href= "#" ></a>                <a href= "#" ></a>                <a href= "#" >< IMG src= "img/pic3.jpg" alt= ""/></a>                <a href= "#" ></a>            </p>            <ul>                <li class= "scroll_in" ></li>                <li></li>                < li></li>                <li></li>            </ul>        </p>

. scroll {    width:720px;    height:410px;    margin:0 Auto;    margin-top:100px;    Overflow:hidden;    Position:relative;}. Scroll ul {    padding:10px 0px;    -webkit-transform:translatex ( -50%);    -ms-transform:translatex ( -50%);    Transform:translatex ( -50%);    Position:absolute;    bottom:0px;    left:50%;}. Scroll ul li {    float:left;    margin:0px 5px;    width:16px;    height:16px;    border-radius:16px;    border:1px #73B613 solid;    Background: #FCBE47;    Box-sizing:border-box;    }. Scroll ul li.scroll_in{    background: #FF6600;}

The above examples of the load of these buttons is a UL element, UL elements do not have a fixed width high, wrote a positioning left:50% left 50%, if not write transform words this does not center, the right width will include its own UL width.

Transform: TranslateX ( -50%); the function of this sentence is to let the UL relative to its own position horizontally left its own 50% width. This is exactly what we want to achieve.

In the actual project we use more is the modal box, with P simulation window effect.

The picture in is horizontally vertically centered.

<p class= "Demo" > </p>

. demo{    position:fixed;    top:50%;    left:50%;    Transform:translate ( -50%,-50%);    -webkit-transform:translatex ( -50%);    -ms-transform:translatex (-50%);}

In fact, the above example and we write the pop-up window to the center is the same. is not very simple, with this we do not write so many JS beg to go.