1.水平居中
.div{ margin:0 auto; （或者 margin:auto;） width:500px; height:300px; }
2.使用margin水平垂直居中
方式一：
.div { text-align: center; line-height: 200px; border: 2px pink solid; width: 300px; height: 200px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -150px; }
方式二：
<!DOCTYPE html> <html> <head> <title>块级元素水平，垂直居中</title> <meta charset="utf-8"> <style> .wrapper { height: 600px; border: 1px solid gray; } .box { width: 100px; height: 100px; background: gold; margin: 250px auto; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> </div> </body> </html>
3.jquery实现DIV水平垂直居中
.div { text-align: center; line-height: 200px; border: 2px pink solid; width: 300px; height: 200px; }
< script > $(window).resize(function(){ $(".div").css({ position: "absolute", left: ($(window).width() - $(".div").outerWidth())/2, top: ($(window).height() - $(".div").outerHeight())/2 }); }); $(function(){ $(window).resize(); }); < /script >
4.使用css3 tansform属性
<!DOCTYPE html> <html> <head> <title>块级元素水平，垂直居中</title> <meta charset="utf-8"> <style> .wrapper { height: 400px; width:600px; border: 2px solid pink; border-radius:10px; } .box { position:relative; height:200px; width:200px; top:50%; left:50%; transform: translate(-50%,-50%); background:#abcdef; } </style> </head> <body> <div class="wrapper"> <div class="box">adfagagafajkfhla</div> </div> </body> </html>
效果如下：
单独设置垂直居中可使用：
top:50%;
tansfrom:translateY(-50%);
单独使用水平居中可使用：
left:50%;
tramsform:translateX(-50%);
5.table-cell
注意：可能会破坏页面整体布局
<!DOCTYPE html> <html> <head> <title>块级元素水平，垂直居中</title> <meta charset="utf-8"> <style> .wrapper { height: 400px; width:600px; border: 2px solid pink; border-radius:10px; display:table; } .box { text-align:center; position:relative; display:table-cell; vertical-align:middle; background:#abcdef; } </style> </head> <body> <div class="wrapper"> <div class="box">adfagagafajkfhla</div> </div> </body> </html>
效果如下：
6.使用示例：DIV创建水平垂直居中遮罩层
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" / > <title></title> <style> #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity = 50); } #win { position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; background: #fff; margin: -102px 0 0 -202px; line-height: 200px; text-align: center; border: 4px solid #CCC; } </style> </head> <body> <div id="overlay" ></div > <div id="win" > Div层居中 </div > </body> </html>
效果：
