子盒子居中的简便方法

初始设定创建互相嵌套的两个盒子

 

方法一

利用水平居中text-align: center和行高line-height进行实现

行高：对块级元素无效

所以为内联盒子设置高后，行高减去内联高后，由半行距平分

text-align

• 只在块元素中使用，直接用在内联元素上不生效。
• 会使块元素中的所有内联内容对齐。
• 会对块元素中包含的文本内容生效。
• 对行级元素span也生效
• 在其内的块元素也会对齐是因为子块元素继承父块元素的text-align的属性。

效果

 方法二

利用利用子绝父相和外边距margin实现

原理：margin百分比是按照包含块的宽度计算的！且padding比例也是按包含块的宽度计算！

代码

 方法三

子绝父相定位+transform让盒子居中

 原理：定位的位置是取决于盒子的左上角的位置，transform谁使用以谁为基本，所以便延X轴与Y轴各移动50%即一半

方法四

利用flex盒子:父元素中添加display:flex;，然后在父元素中添加主轴居中（justify-content:center）和侧轴居中(align-item:center)

代码