方法一：利用定位（常用方法，比较推荐）
.parent{ width:500px, height:500px, border:1px solid #000, position:relative } .child{ width:100px, height:100px, border:1px solid #999, position: absolute; top: 50%, left: 50%; margin-top: -50px margin-left: -50px }
方法二：利用 margin:auto;
.parent { width: 500px; height: 500px; border: 1px solid #000; position: relative;} .child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }
方法三：利用 display:table-cell
.parent { width: 500px; height: 500px; border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center;} .child { width: 100px; height: 100px; border: 1px solid #999; display: inline-block;}
方法四：利用 display：flex;设置垂直水平都居中
.parent { width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center;} .child { width: 100px; height: 100px; border: 1px solid #999;}