Training center and practice with css animation

A first vertically centered manner

.jz{height: 50px;width: 300px;position: fixed;background: #333;top:50%;left: 50%;margin-top: -25px;margin-left: -150px}

<div class="jz"></div>

The second vertically centered way  , css3 resolve compatibility issues

.jz2{height: 50px;width: 200px;position: fixed;background: #555;top:50%;left: 50%;transform: translate(-100px,-25px)}

<div class="jz2"></div>

A third vertically centered manner  convenient, need not be calculated

.jz3{height: 50px;width: 150px;position: fixed;background: #888;top:0;left: 0;right: 0;bottom: 0;margin: auto;}

<div class="jz3"></div>

A fourth embodiment of the vertical center  elastic box applicability of this method is not high, but the use of an element in viable

html,body{height: 100%;width: 100%}
    body{display: flex;justify-content: center;align-items: center;height: 100%;}
    .jz4{height: 50px;width: 100px;background: #111;z-index: 10;} 

<div class="jz4"></div>

Fifth vertically centered manner , using the text-align: center and vertical-align: middle, with a 100% as a reference element

.jz5{text-align:center}
       .jz5 img{vertical-align:middle}
       .jz5 span{display:inline-block;vertical-align:middle,height:100%;width:0;}

<div>
    <img src="../img/1.jpg" alt="">
    <span></span>
</div>

css positioning to achieve picture zoom effect

 .scaleimg{height: 400px;width: 800px;margin: 40px auto;}
    .scaleimg div{float: left;height: 70;width: 112px;padding: 5px;border: 1px solid #444;position: relative;margin: 10px}
    .scaleimg div img:nth-of-type(1){display: block;height: 60px;width: 100px;padding: 5px;border: 1px solid #444}
    .scaleimg div img:nth-of-type(2){display: block;height: 100px;width: 140px;padding: 5px;border: 1px solid #444;display: none;position: absolute;top: -15px;left: -15px;}
    .scaleimg div:hover img:nth-of-type(2){display: block;z-index: 10;}

 <div class="scaleimg">
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
    </div>
<div style="display: flex;flex-wrap: wrap;">

rotating amplifying css3

.roimg{position: relative;height: 200px;width: 200px;border-radius: 50%;}
        .roimg div:nth-of-type(1){position: absolute;height: 160px;width: 160px;border-radius: 50%;background: url("../img/1.jpg") no-repeat;background-origin: border-box;border: 20px solid rgba(255,255,255, .5);transition: 1s;}
        .roimg div:nth-of-type(2){height: 200px;width: 200px;border-radius: 50%;text-align: center;line-height: 200px;background: #111;color: #fff;transition: 1s;transform: scale(0);font-size: 24px}
        .roimg:hover div:nth-of-type(1){transform: scale(0) rotate(360deg);}
        .roimg:hover div:nth-of-type(2){transform: scale(1) rotate(360deg);}

<div class="roimg">
        <div></div>
        <div>文字</div>
</div>

css3 transparency becomes enlarged rotation 0

.roimg2{position: relative;height: 200px;width: 200px;border-radius: 50%;}
        .roimg2 div:nth-of-type(1){position: absolute;height: 160px;width: 160px;border-radius: 50%;background: url("../img/1.jpg") no-repeat;background-origin: border-box;border: 20px solid rgba(255,255,255, .5);transition: .5s;}
        .roimg2 div:nth-of-type(2){height: 200px;width: 200px;border-radius: 50%;text-align: center;line-height: 200px;background: #111;color: #fff;font-size: 24px}
        .roimg2:hover div:nth-of-type(1){transform: scale(2) rotate(360deg);opacity: 0;}

<div class="roimg2">
        <div></div>
        <div>文字</div>
</div>

css3y rotation shaft 180

.roimg3{position: relative;height: 200px;width: 200px;border-radius: 50%;margin: 0 auto;}
        .roimg3 div:nth-of-type(1){position: absolute;height: 160px;width: 160px;border-radius: 50%;background: url("../img/1.jpg") no-repeat;background-origin: border-box;border: 20px solid rgba(255,255,255, .5);transition: .5s;transform-origin: left center;}
        .roimg3 div:nth-of-type(2){height: 200px;width: 200px;border-radius: 50%;text-align: center;line-height: 200px;background: #111;color: #fff;font-size: 24px}
        .roimg3:hover div:nth-of-type(1){transform:rotateY(180deg);}

<div class="roimg3">
        <div></div>
        <div>文字</div>
</div>