css如何使一个盒子水平垂直居中

方法一：利用定位(常用方法,推荐）

<style>
.parent{width: 500px;height: 500px;border: 1px solid #000;position:relative;
}.child {width: 100px;height: 100px;border: 1px solid #999;position:absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}
</style>

方法二：利用 margin:auto;

<style>.parent{width: 500px;height: 500px;border: 1px solid #000;position:relative;}.child {width: 100px;height: 100px;border: 1px solid #999;position:absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
</style>

方法三：利用 display：flex;设置垂直水平都居中

<style>.parent{width: 500px;height: 500px;border: 1px solid #000;display: flex;justify-content: center;align-items: center;}.child {width: 100px;height: 100px;border: 1px solid #999;}
</style>

方法四：利用 transform

<style>.parent{width: 500px;height: 500px;border: 1px solid #000;position:relative;}.child {width: 100px;height: 100px;border: 1px solid #999;position:absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);}
</style>