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>