实现元素水平垂直居中的方法
1.定位方法1
/* 子绝父相+上下左右都为0,然后margin: auto; */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
2.定位方法2
position: absolute;
left: 50%;
top: 50%;
/* 在这里使用平移 */
/* 平移50% 效果是平移元素自身大小的50% */
transform: translate(-50%,-50%);
/* margin值也可以,不过要设定具体大小 */
3.弹性盒
弹性盒只适用于移动端布局
/* 父元素转化为弹性盒子 */
display: flex;
/* 主轴居中,交叉轴居中 */
justify-content: center;
align-items: center;
4.将子元素div转成行内块
将子元素div转换成行内块元素
dispaly: inline-block;
在子元素后面加一个span标签
/* vertical-align修饰行内块 */
vertical-align: middle;
给父盒子设置
line-height
text-align: center;