1、固定宽度高度，使用定位
. child { position: absolute； left: 50%； top: 50%； 玛格琳- left :-250 px； margin-top: -250px； width: 500px； height: 500px； 后台： yellow； z-index: 1； ) 2、使用固定宽度高度以外(也适用于固定宽度高度)的定位变压器
. child { position: absolute； left: 50%； top: 50%； 后台： yellow； z-index: 1； transform:translate3d(-50%、-50%和0 )； } 3、弹性布局
. parent { display: flex； width: 400px； height: 400px； 后台： red； justify-content: center； //align-items3360center水平居中； //垂直居中}.child { width: 200px； 高： 200 px； 后台： # 000； }或
. parent { display: flex； width: 400px； height: 400px； 后台： red； }.child { width: 200px； 高： 200 px； 后台： # 000； margin :自动； (4、表格蜂窝布局
table-cell相当于表中的td，td是内联元素，无法设置宽度和高度，因此嵌套层必须设置为display :内联块
div class=' parent ' div class=' content ' div class=' child '/div/div.parent { width 3360400 px； height: 400px； 显示：表； } .content { background: red； display :表蜂窝； 垂直对准：米； 文本对齐3360中心； } .child { background: #000； display :在线区块； width: 200px； 高： 200 px； }由于} flex、table-cell布局更改了父div的display属性，因此在实际应用中，如果有多个子节点，反而更难使用，因此选择适当的方法