一:绝对定位 距离 上左 百分之50,调整transform达到居中 `.parent{ position:relative }
.child{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }` translate跟上两个数值 分别设置X,Y值
二:绝对定位 距离 上左 百分之50 调整margin 负值调整 `.parent{ position:relative }
.child{ position:absolute; top:50%; left:50%; margin-top: -50px; /* 自身 height 的一半 / margin-left: -50px; / 自身 width 的一半 */`
三:绝对定位 上下左右0 margin auto居中即可
.parent{ position:relative } .child{ position:relative; top,bottom,left,right:0; margin: auto;
四:使用flex布局 需要考虑兼容 移动端使用较多 `.parent{ display: flex; justify-content: center; align-items: center; }
.child{ margin: auto; }`