HTML元素居中显示

• margin

<div style="margin:300px auto,background-color:red,width:100px,height:100px"></div>

左右相对于父级元素居中,上下距离需要计算

ps:当为margin设置一个参数时代表上下左右;两个上下\左右;三个上\左右\下.

上下两个相邻元素的margin会相互覆盖取最大值,左右不重合

 <div style="margin:auto;background-color:red;width:100px;height:100px;position:absolute;top:0;left:0;right:0;bottom:0"></div>

距父级上下左右都为零,margin:auto

• position:absolute绝对定位

 <div style="background-color:red;width:100px;height:100px;position:absolute;top:50%;left:50%"></div>

元素左上角位于其父级元素中心

原文地址：https://www.cnblogs.com/chen67547/p/8387734.html