水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
设置line-height 等于height
position:absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
设置盒子水平和垂直居中
定位1
image.png
定位2
image.png
定位3(定位的盒子一定要宽高)
image.png
弹性盒子
image.png
JS实现
image.png
table-cell父元素一定要有宽高
image.png