html设置盒子水平垂直居中,盒子水平垂直居中10种方法

盒子水平垂直居中10种方法

HTML代码

第一种：通过绝对定位的方式 absolute + 负margin

首先知道子元素的宽高，给子元素设置top：50%；left：50%，

但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，

通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了

#container {

position: relative;

width: 600px;

height: 500px;

border: 1px solid #000;

margin: auto;

}

#box {

position: absolute;

width: 200px;

height: 200px;

left: 50%;

top: 50%;

margin: -100px -100px;

background-color: #0ff;

}

优点： 比较好理解，兼容性好

缺点： 需要知道子元素的宽高

第二种：也是通过绝对定位的方式 absolute + margin auto

这个是需要将各个方向的距离都设0，再讲margin设为auto；就行

优点： 兼容性也很好

缺点： 需要知道子元素的宽高

第三种：abso