<body> <div id="box"> <div class="con"></div> </div> </body>
方法1：
<style> #box { width: 300px; height: 200px; background: lightpink; position: relative; } .con { width: 100px; height: 100px; background: blue; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style>
方法2：
<style> #box { width: 300px; height: 200px; background: lightpink; position: relative; } .con { width: 100px; height: 100px; background: blue; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
方法3：
<style> #box { width: 300px; height: 200px; background: lightpink; display: flex; justify-content: center; align-items: center; } .con { width: 100px; height: 100px; background: blue; } </style>
原文：https://www.cnblogs.com/SRH151219/p/10401489.html