<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no" > <title>Document</title> <style> *{ margin:0; padding:0; } /* 不定宽高的水平垂直居中 */ /* .smallBox{ 100px; height:100px; background:yellow; position:absolute; top: 50%; left:50%; z-index:3; -webkit-transform: translate(-50%, -50%); border-radius:6px; } */ /*.smallBox{ position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; 100px; height:100px; background:yellow; border-radius:6px; }*/
/*.smallBox{
position: absolute;
top: 50%; left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px; height: 100px;
}*/
.smallBox{
100px;
height:100px;
background:red;
/* vh视窗高度 1vh相当于1% */
margin:50vh auto 0;
transform:translateY(-50%);
} </style> </head> <body> <div class="smallBox"></div> </body> </html>
css3实现水平垂直
<!Doctype html> <html> <head> <title></title> <style> #load{ 120px; height:140px;background:red; position:absolute;left:calc(50% - 60px); top:calc(50% - 70px);} </style> </head> <body> <div id="load"></div> </body> </html>