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>
元素左上角位于其父级元素中心
