初始设定创建互相嵌套的两个盒子
方法一
利用水平居中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)
代码