转载自喜欢JS的无名小站
例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;)。让其上下左右居中。
方法一（varticle-align） 理念利用表格单元格的居中属性。
步骤父div外层配置一个div，同时设置为表格元素 (display: table)，宽度为100%
父div配置为表格单元格元素 (display: table-cell)
父div配置居中属性（vertical-align: middle），使子div上下居中
子div通过margin配置左右居中（margin-left:auto; margin-right:auto）
例子<style> * {margin: 0; padding: 0; box-sizing: border-box;} .table {display: table; width: 100%;} .father {display: table-cell; vertical-align: middle;} .son {margin: auto;} </style> <body> <div class="table" > <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;"> <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div> </div> </div> </body>