一、
.main { width: 300px; height: 500px; background-color: #50ba8b; position: relative; } .content { width: 100px; height: 100px; background-color: #5b4d4e; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
二、
.main { width: 300px; height: 300px; background-color: #50ba8b; position: relative; } .content { width: 150px; height: 150px; background-color: #5b4d4e; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
三、
.main { width: 300px; height: 300px; background-color: #50ba8b; display: flex; } .content { width: 150px; height: 150px; background-color: #5b4d4e; margin: auto; }
四、
.content { width: 150px; height: 150px; background-color: #5b4d4e; /*关键代码*/ display: flex; align-items: center; justify-content: center; margin: auto; } <div class="content"> <div>12313</div> </div>
原文:https://www.cnblogs.com/mengzekun/p/11537679.html