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>
2.利用绝对定位来实现居中:适合高度,宽度已知的情况。
<!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>
3.使用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;
width: 300px;
background: #ccc;
}
#center-div{
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<div id="center-div">
xxx
</div>
</div>
</body>
</html>
4.未知高度和宽度的元素解决方案 transform: translate(-50%, -50%);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
position: relative;
width: 500px;
height: 500px;
}
#center-div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
}
</style>
</head>
<body>
<div id="container">
<div id="center-div">
xxx
</div>
</div>
</body>
</html>
5.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>