umtheme 方法一：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>任意盒子居中calc</title> <style type="t...
方法一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>任意盒子居中calc</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ height:100%; } .element{ height:100%; width: 100%; background-color:blue; position: relative; } .element img{ position: absolute; /* css3可以计算属性 */ top:calc(50% - 150px); left:calc(50% - 225px); } </style> </head> <body> <div> <img src="https://www.umtheme.com/zb_users/upload/2017/03/201703261490505576415367.jpg" alt="" /> </div> </body> </html>
方法二
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>任意盒子居中CSS3</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ height:100%; background-color:red; } .element{ height:100%; width: 100%; background-color:blue; position:relative; } .element img{ position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } </style> </head> <body> <div> <img src="https://www.umtheme.com/zb_users/upload/2017/03/201703261490505576415367.jpg" alt="" /> </div> </body> </html>
定位居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位与居中</title>
<style>
*{
padding:0;
margin:0;
}
.wrapper{
width:400px;
height:200px;
background-color:#ccc;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
margin:auto;
}
.style{
position:absolute;
width:100px;
height:100px;
border-radius:50px;
background:#fc0;
}
.rt{
top:-50px;
left:-50px;
}
.lb{
bottom:-50px;
right:-50px;
}
</style>
</head>
<body>
<div>
<div class="style rt"></div>
<div class="style lb"></div>
</div>
</body>
</html>任意居中：
<html> <head> <meta charset="UTF-8" /> <title>任意盒子居中display:table</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ height:100%; } .element{ height:100%; width: 100%; background-color:blue; text-align: center; display:table; } .element .img{ display:table-cell; vertical-align:middle; } </style> </head> <body> <div> <div> <img src="1.jpg" alt="" /> </div> </div> </body> </html>
