块级元素水平垂直居中方法 CSS

一、加padding减height

Document - 锐客网

文章图片

垂直水平居中方法一：

padding-top:（box2高度-box1高度）/ 2

height: 原height值 - padding-top值

box2：margin: 0 auto （脱离标准流的盒子该属性值失效）

优缺点：

要先知道盒子的宽高，居中盒子不能脱离标准流

二、子绝父相

Document - 锐客网

文章图片

垂直水平居中方法二：

box1 positon: realtive && box2 position: absolute

box2: top: 50% , margin-top: -(height/2)

box2: left: 50% , margin-left: -(width/2)

优缺点：

要先知道盒子的宽高

注：

box2盒子直接使用 position: relative 或 positon: absolute

left: top: 或 right: bottom:

box2盒子有border属性时，margin-top与margin-left要减去border的宽

三、margin: auto

Document - 锐客网

文章图片

垂直水平居中方法三：

box1 positon: realtive && box2 position: absolute

box2盒子 top、left、bottom、right值都设为0

box2盒子添加 margin: auto

box2盒子有border属性时，不影响水平垂直居中

【块级元素水平垂直居中方法】优缺点：

可以不需要知道盒子的宽高就能居中

盒子需脱离标准流（positon: absolute），margin: auto垂直方向居中才有效

四、transform: translate(-50%, -50%)

Document - 锐客网 box1 box2

文章图片

垂直水平居中方法四：

box1 positon: realtive && box2 position: absolute

box2: top: 50%；left: 50%

box2盒子使用 css3属性 transform: translate(-50%, -50%)代替margin实现偏移量，偏移量根据自身盒子宽高用百分比进行宽高偏移

box2盒子有border属性时，不影响水平垂直居中

优缺点：

可以不需要知道盒子的宽高就能居中

暂无发现居中属性值失效问题