1.用inline-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
text-align: center;
height: 400px;
background: #4dc71f;
}
#container:before{
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
#center-div{
display: inline-block;
vertical-align: middle;
background: #2aabd2;
}
</style>
</head>
<body>
<div id="container">
<div id="center-div">
xxx
</div>
</div>
</body>
参考:https://css-tricks.com/centering-in-the-unknown/
2.用相对绝对定位和负边距实现上下左右居中:高度和宽度已知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.div2{
height: 600px;
width: 600px;
position: relative;
border: 2px solid #000;
}
.img2{
height: 200px;
width: 200px;
position: relative;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="div2">
<img class="img2" src="images/hongbao.png">
</div>
</body>
</html>
其实第二种要理解不能,首先相对父元素top,left定位在50%的位置,这时候只是图片左上角居中,而中心点还没居中,加上margin: -100px 0 0 -100px;利用负边距把图片的中心点位于父元素的中心点,从而实现垂直水平居中
3.利用绝对定位来实现居中:适合高度,宽度已知的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
text-align: center;
height: 400px;
background: #4dc71f;
position: relative;
}
#center-div{
position: absolute;
margin: auto;
top: 0;
right: 0;
left:0;
bottom: 0;
width: 200px;
height: 200px;
background: #2b669a;
}
</style>
</head>
<body>
<div id="container">
<div id="center-div">
xxx
</div>
</div>
</body>
</html>
4.使用table-cell,inline-block实现水平垂直居中:适合高度宽度未知的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
display: table-cell;
text-align: center;
vertical-align: middle;
height: 300px;
background: #ccc;
}
#center-div{
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<div id="center-div">
xxx
</div>
</div>
</body>
</html>
5.使用css3中的transform来时实现水平垂直居中:适合高度宽度未知的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
position: relative;
height: 200px;
background: #333;
}
#center-div{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="container">
<div id="center-div">
xxx
</div>
</div>
</body>
</html>
还可以使用Flexbox来实现水平垂直居中;适合宽度高度未知情况,但是要注意兼容性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p_2{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: #009f95;
}
</style>
</head>
<body>
<div id="p_2">
<div id="c_2">
xxxxxxx
</div>
</div>
</body>
</html>