1.设置父元素样式为:
display: flex;
/* 或display: grid; */
justify-content: center;
align-items: center;
2.设置父元素样式为:
display: table-cell;
text-align: center;
vertical-align: middle;
3.设置父元素样式为:
display: flex;
/* 或display: grid; */
display: flex;
设置子元素样式为:
margin: auto;
4.设置父元素样式为:
position: relative;
设置子元素样式为:
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
实例代码如下:
<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
color: white;
}
.jz1{
display: flex;
/* display: grid; */
width: 100px;
height: 100px;
justify-content: center;
align-items: center;
background-color: aqua;
}
.jz2{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100px;
height: 100px;
background-color: rgb(255, 0, 174);
}
.jz3{
/* display: flex; */
display: grid;
display: flex;
width: 100px;
height: 100px;
background-color: rgb(13, 255, 0);
}
.p3{
margin: auto;
}
.jz4{
position: relative;
width: 100px;
height: 100px;
background-color: rgb(136, 0, 255);
}
.p4{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="jz1">
<div class="p1">居中对齐1</div>
</div>
<div class="jz2">
<div class="p2">居中对齐2</div>
</div>
<div class="jz3">
<div class="p3">居中对齐3</div>
</div>
<div class="jz4">
<div class="p4">居中对齐4</div>
</div>
</body>
</html>
演示效果如下图: