html如何让div盒子居中

以下是两种HTML让div盒子居中的方法：
1.使用flex布局，将父元素设置为弹性盒子，通过justify-content和align-items属性分别实现水平和垂直居中。

<style>
    body {
        margin: 0;
    }
    .a {
        display: flex;
        justify-content: center; /*水平居中*/
        align-items: center; /*垂直居中*/
        height: 600px;
        width: 600px;
        border: 1px solid black;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<div class="a">
    <div class="box"></div>
</div>

2.使用position和transform属性，将父元素设置为相对定位，子元素设置为绝对定位，通过top、left和transform属性实现水平和垂直居中。

<style>
    body {
        margin: 0;
    }
    .a {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid black;
    }
    .box {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50%; /*盒子左上角的那个点在页面正中间*/
        left: 50%;
        background-color: pink;
        transform: translateX(-50%) translateY(-50%);/*不需要知道盒子宽度*/
    }
</style>
<div class="a">
    <div class="box"></div>
</div>