//html部分 <div class="main_box"> <div class="box"></div> </div>
第一种:
<style type="text/css"> .main_box { height: 50rem; 50rem; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; position: relative; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style>
第二种:
<style type="text/css"> .main_box { height: 50rem; 50rem; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; position: relative; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; } </style>
第三种:
<style type="text/css"> .main_box { height: 500px; 500px; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; position: relative; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; position: absolute; left: 250px; top: 250px; margin-top: -50px; margin-left: -50px; } </style>
第四种:
<style type="text/css"> .main_box { height: 500px; 500px; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; position: relative; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; position: absolute; left: 250px; top: 250px; transform: translate(-50%,-50%); } </style>
第五种:
<style type="text/css"> .main_box { height: 500px; 500px; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; position: relative; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; position: absolute; left: 250px; top: 250px; transform: translate(-50px,-50px); } </style>
第六种:
<style type="text/css"> .main_box { height: 500px; 500px; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; position: relative; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; position: absolute; left: 50%; top: 50%; transform: translate(-50px,-50px); } </style>
第七种:
<style type="text/css"> .main_box { height: 500px; 500px; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; position: relative; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style>
第八种:
<style type="text/css"> .main_box { height: 500px; 500px; box-sizing: border-box; border:1px solid #00FFFF; margin:0 auto; display: flex; justify-content: center; align-items: center; } .box { height: 100px; 100px; box-sizing: border-box; border:1px solid #00FFFF; } </style>