情况一文字水平垂直居中
只需加以下内容即可实现 行高等于父元素的高度
text-align: center;
line-height: ;
情况二实现子元素(盒子)在父元素(盒子)中垂直水平居中
方法一 用觉对定位在子元素中加入以下内容 并在父元素中添加position: relative;即可实现
position:absolute;
left:0
r0
t0
b0
margin:auto
方法二 还是利用定位的原理在子元素中加入以下内容 并在父元素中添加position: relative;即可实现
position:absolute;
left:50%;
margin-left:-width/2;子元素负的宽度的二分子一
top:50%;
margin-top:-height/2;子元素负的高度的二分子一
方法三利用弹性盒子
在父元素中添加 display:flex;并在子元素中添加 margin:auto;即可实现
方法四利用弹性盒子
justify-content: center;
align-items: center;
第一行 调整主轴对齐方式为居中
第二行调整侧轴对齐方式为居中
即可实现