1.弹性布局display: flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
/* 弹性布局 */
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.position+margin:auto
margin:auto 表示横竖都居中;
margin: 0 auto 表示横居中,竖不居中;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
3.position+位移transform: translate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中</title>
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
/* 让小矩形处于以左上角为原点的中心位置 */
top: 50%;
left: 50%;
/* 让小矩形往左上移动自身长宽的50% 转换:位移自身的一半 */
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
4. 表格单元格display: table-cell + vertical-align: middle + text-align: center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
display: table-cell; /* 此元素会作为一个表格单元格显示 */
vertical-align: middle; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
.son{
width: 100px;
height: 100px;
background-color: green;
display: inline-block; /* 行内块 */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
5.表格单元格display: table-cell + vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
display: table-cell; /* 此元素会作为一个表格单元格显示 */
vertical-align: middle; /* 垂直居中 */
}
.son{
width: 100px;
height: 100px;
background-color: green;
/* margin:auto表示横竖都居中,margin: 0 auto表示横居中,竖不居中;两个都可 */
/* margin:0 auto; */
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
6. 网格容器 display: grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: red;
display: grid; /* 设置该元素为网格容器 */
}
.son{
width: 100px;
height: 100px;
background-color: green;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>