如何让元素页面居中
2017-03-23 本文已影响603人
尤樊容
这分为两种情况：
1、有宽高的情况下，实现水平和垂直居中
方法一：使用定位 position:absolute;left和top值为50%；然后margin的left和top减去宽高的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
position:absolute;
left:50%;
top:50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图：
Paste_Image.png
方法二：使用定位position:absolute;四个方向值都是0，然后margin：auto；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="box">有宽高的div</div>
</body>
</html>
效果图同上。
2、没有宽高的情况下，元素宽高由内容撑开
方法一：结合css3的transform:translate(-50%,-50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color:red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">没有宽高的div，大小由内容撑开</div>
</body>
</html>
效果图：
Paste_Image.png
方法二：使用js实现，实现水平和垂直居中，原理和第一种情况的第一种方法一样，使用定位和margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color:red;
padding: 10px;/*主要用于说明获取宽高的问题*/
}
</style>
</head>
<body>
<div class="box" id="div1">用js实现水平垂直居中</div>
</body>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oDiv = document.getElementById('div1');
//alert(oDiv.clientWidth);//有padding的时候是180px，没有padding的时候是160px
oDiv.style.position = "absolute";
oDiv.style.left = "50%";
oDiv.style.top = "50%";
oDiv.style.marginLeft = -(oDiv.clientWidth/2) + "px";
oDiv.style.marginTop = -(oDiv.clientHeight/2) + "px";
},false);
</script>
</html>
效果图：
Paste_Image.png
方法三：使用表格display：table-cell，把其父级变成表格样式，再利用表格的样式来进行居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width:500px;
height:500px;
border:1px solid black;
display:table-cell;
text-align:center;
vertical-align:middle;
}
.box{
background-color:red;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">使用表格实现垂直水平居中</div>
</body>
</html>
效果图：
Paste_Image.png
以下是关于display：table-cell的相关解释：
Paste_Image.png
方法四：利用CSS3弹性盒模型（flexBox）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width:400px;
height:400px;
border:1px solid black;
display:flex;
justify-content: center;
align-items:center;
}
.box{
background-color: red;
}
</style>
</head>
<body>
<div class="box">弹性盒模型</div>
</body>
</html>
效果图：
Paste_Image.png
