如何实现元素在父标签中上下左右都居中

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

1. flex方式居中
2. absolute + margin方式居中（已知居中元素宽高）
3. abosulte + transform方式居中（不需要知道元素宽高）
4. 父元素设置table，子元素设置table-cell方式居中
5. line-height方式居中，设置父元素行高与高度一样即可

利用弹性盒子（flex） 将父级元素设置为弹性容器，在其子元素中设置margin:auto;即可实现居中。

div
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-50px;
height:-50px;
z-index:1000;
}

很高兴为您解答，如果您对我的回答满意的话，请采纳一下。
您的采纳是对我最大的支持
阿里云优惠：领取有惊喜。
https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=nb3paa5b
阿里云帮助文档：https://help.aliyun.com/
智能应答机器人：https://ia.aliyun.com/