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；就行

优点： 兼容性也很好

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

第三种：absolute + calc(计算)

这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了

calc:任何长度值都可以使用calc()函数进行计算；

calc()函数使用标准的数学运算优先级规则；

它支持 “+”, “-”, “*”, “/” 运算

优点： 他的兼容性依赖的是calc的兼容性

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

第四种：absolute + transform (过渡)

这个方法不需要子元素固定宽高

修复绝对定位的问题，还可以使用css3新增的transform，transform的translate

属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了

#container {

position: relative;

width: 600px;

height: 600px;

border: 1px solid #000;

margin: auto;

}

#box {

position: relative;

top: 50%;

left: 50%;

width: 200px;

height: 200px;

transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

background-color: #0ff;

}

优点： 代码量少

缺点： IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

第五种：line-height

只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

优点： 代码简洁

缺点： 只对文本有效，只对单行文本有效，多行文本不可以

第七种：table 形式

通过table单元格的形式设

优点： tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

缺点： 这个不是table的正确方法，不是很建议使用，但是也是可以实现的

第八种：table-cell实现水平垂直居中: table-cell middle center组合使用

直接给父级设

#container {

display: table-cell;

vertical-align: middle;

text-align: center;

width: 240px;

height: 180px;

border:1px solid #666;

}

第九种：弹性盒子的方式

#container {

width: 600px;

height: 600px;

border: 1px solid #000;

display: flex

justify-content: center;

align-items: center;

}

优点： 移动端使用灵活自如

缺点： pc端需要根据兼容情况来判定

第十种：grid(网格布局)

给父级设display:grid;

给子元素设align-self: center;justify-self: center;

优点： 代码量少

缺点： 兼容不如flex，建议用flex