margin:auto使用原理及水平垂直居中方案
margin:auto原理
margin:auto 是自动分匹配剩余空间的,当一个元素在没有被强制定宽高时,是撑满一个方向的,当强制定宽高时,此方向上就有剩余的空间,当margin:auto时,此方向上将自动分配空间,实现居中效果。
水平垂直居中方案
// 水平垂直居中方案
position:absolute
top:0px
bottom:0px
left:0px
right:0px //将元素撑满整个空间
width:100px
height:100px //将元素强制定宽高
margin:auto //margin分配剩余空间,达到水平垂直居中的效果