1. Use inline-block and vertical-align to achieve centering: This method is suitable for unknown width and height.
<!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. Use absolute positioning to achieve centering: suitable for situations where the height and width are known.
<!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. Use table-cell, inline-block to achieve horizontal and vertical centering: suitable for unknown height and width
<!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. Element solution with unknown height and width 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 to achieve horizontal and vertical centering; suitable for unknown width and height, but pay attention to compatibility
<!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>