前情提要:margin:auto默认支持水平居中,不支持垂直居中
(1)关键词:grid:
父元素:display:grid,子元素:margin:auto
(2)关键词:flex:
父元素:display:flex,子元素:margin:auto
(3)关键词:translate:
父元素:position:relative,子元素:position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
ps,-50%是元素自身50%的距离
(4)关键词:position:
父元素:position:relative,子元素:position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;