盒子水平垂直居中
1. 使用弹性盒模型
缺点:兼容性不好
.parent {
display:flex;
justify-content:center;
align-item:center;
}
2. 基于定位
缺点:兼容性不好
.parent {
position:relative;
}
.son {
position:absolute;
top:50%;
left:50%;
transfrom:translateX(-50%,-50%);
}
3. 使用JS
//获取父元素宽高
//设置子元素的位置
4. diaplay:table-ceil
.parent{
/*父级必须有固定宽高*/
width:500px;
height:500px;
display:table-ceil;
vertical-align:middle;
text-align:center;
}
.son{
display:inline-block
}
CSS盒模型
标准盒模型、IE盒模型. 区别在于总宽度计算不一样
标准盒子模型
box-sizing:content-box;
IE盒模型
box-sizing:border-box;
