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>
效果：
