利用定位(父相子绝) + 位移

-- 父相子绝 + 子 margin:auto;

-- 父相子绝 + 子 top,left 位移50%; transform:translate(-50%,-50%);

<style>
    .father{
        //width,height,其他省略
  
        position: relative;
    }
    .son{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

利用定位+margin:负值

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

table布局

<style>
  .father {
 //width,height,其他省略

  display: table-cell;
  
  text-align: center;//水平居中
  vertical-align: middle;//垂直居中
}
.son {
 //width,height,其他省略

  display: inline-block;
}
</style>
  <div class="father">
  <div class="son"></div>
  </div>

flex弹性布局

<style>
    .father {
        display: flex;
        justify-content: center;//主轴居中,默认水平居中
        align-items: center;//交叉轴居中,默认垂直居中
    }
    .son {
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

grid网格布局

<style>
    .father {
            display: grid;
            justify-content: center;//主轴居中,默认水平居中
            align-items: center;//交叉轴居中,默认垂直居中
        }
        .son {
        }
</style>
<div class="father">
    <div class="son"></div>
</div>

拓展

在CSS中实现元素的水平和垂直居中布局是一个常见需求，不同的元素类型（内联元素和块级元素）和布局方法（如Flexbox、Grid、定位等）提供了多种解决方案。以下是对您提供的文件内容的总结：

内联元素居中布局

水平居中 ：

• **行内元素可以通过设置父元素的 **<span class="ne-text">text-align: center;</span> 来实现水平居中。
• **使用Flexbox布局，可以设置父元素为 **<span class="ne-text">display: flex;</span> 并使用 <span class="ne-text">justify-content: center;</span> 来实现水平居中。

垂直居中 ：

• 对于单行文本，可以通过设置父元素的高度等于行高（<span class="ne-text">height === line-height</span>）来实现垂直居中。
• **对于多行文本，可以使用表格单元格布局，将父元素设置为 **<span class="ne-text">display: table-cell;</span> 并使用 <span class="ne-text">vertical-align: middle;</span> 来实现垂直居中。

块级元素居中布局

水平居中 ：

• **对于已定义宽度的元素，可以通过设置 **<span class="ne-text">margin: 0 auto;</span> 来实现水平居中。
• **使用绝对定位，可以将元素的 **<span class="ne-text">left</span> 属性设置为 <span class="ne-text">50%</span>，然后使用 <span class="ne-text">margin-left</span> 设置为元素宽度的一半的负值来实现水平居中。

垂直居中 ：

• **使用绝对定位，可以设置元素的 **<span class="ne-text">top</span>、<span class="ne-text">left</span>、<span class="ne-text">margin-top</span> 和 <span class="ne-text">margin-left</span>（如果已定义高度）来实现垂直居中。
• **通过设置父元素为 **<span class="ne-text">display: table-cell;</span> 并使用 <span class="ne-text">vertical-align: middle;</span> 可以实现垂直居中。
• **使用 **<span class="ne-text">transform: translate(x, y);</span> 可以在不知道元素宽高的情况下实现垂直居中。
• 使用Flexbox（<span class="ne-text">display: flex;</span>）和Grid（<span class="ne-text">display: grid;</span>）也可以实现垂直居中，但Grid的兼容性相对较差。