居中元素宽高已知
（一）absolute + margin
<style>
.father{
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: crimson;
position: absolute;
/* 第一种 */
left: 50%;
top: 50%;
/* 往左和上移自身长度的一半，就为-50px */
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class = "father">
<div class="child"></div>
</div>
</body>
（二）absolute + margin:auto
<style>
.father{
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: crimson;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class = "father">
<div class="child"></div>
</div>
</body>
（三）absolute + calc计算
<style>
.father{
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: crimson;
position: absolute;
/* 这里calc()是css中的一种运算函数
其中-50px 是盒子自身的一半
是第一种方法的简写
本质与方法一一样 */
left: calc(50% - 50px);
top: calc(50% - 50px);
}
</style>
</head>
<body>
<div class = "father">
<div class="child"></div>
</div>
</body>
居中元素宽高未知
（一）Flex与margin: auto;
<style>
.father{
width: 500px;
height: 500px;
border: 1px solid black;
display: flex;
}
.child{
background-color: crimson;
/* 核心代码 */
margin: auto;
}
</style>
</head>
<body>
<div class = "father">
<div class="child">你好，我是大聪明</div>
</div>
</body>
（二）Flex与justify-content: center;align-items: center;
<style>
.father{
width: 500px;
height: 500px;
border: 1px solid black;
display: flex;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: center;
}
.child{
background-color: crimson;
}
</style>
</head>
<body>
<div class = "father">
<div class="child">你好，我是大聪明</div>
</div>
</body>
（三）absolute + transform
<style>
.father{
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.child{
background-color: crimson;
/* 核心代码 */
position: absolute;
top: 50%;
left: 50%;
/* 这里的-50%是相对于自己自身长度的百分比算的 */
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class = "father">
<div class="child">你好，我是大聪明</div>
</div>
</body>
关于transform不会的详见：https://blog.csdn.net/qq_45799465/article/details/122699588?spm=1001.2014.3001.5501
https://blog.csdn.net/qq_45799465/article/details/122699588?spm=1001.2014.3001.5501
（四）table表格元素（不推荐）
<style>
.father{
width: 500px;
height: 500px;
border: 1px solid black;
/* 核心代码 */
text-align: center;
}
.child{
background-color: crimson;
/* 利用行内块可以利用text-align: center;属性 */
display: inline-block;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="father">
<div class="child">你好，我是大聪明</div>
</td>
</tr>
</tbody>
</table>
</body>
（五）display:table-cell
<style>
.father {
width: 500px;
height: 500px;
border: 1px solid black;
/* 核心代码 */
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
background-color: crimson;
/* 利用行内块可以利用text-align: center;属性 */
display: inline-block;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="father">
<div class="child">你好，我是大聪明</div>
</td>
</tr>
</tbody>
</table>
</body>
（六）网格（grid）布局
<style>
.father {
width: 500px;
height: 500px;
border: 1px solid black;
/* 核心代码 */
display: grid;
justify-content: center;
align-items: center;
}
.child {
background-color: crimson;
}
</style>
</head>
<body>
<div class="father">
<div class="child">你好，我是大聪明</div>
</div>
</body>