## 一、 通过position和margin ``` <style> .wrapper { position: relative; width: 500px; height: 500px; border: 1px solid red; } .content{ position: absolute; width: 200px; height: 200px; top: 0; bottom: 0; left: 0; right: 0; margin:auto; border: 1px solid green; } </style> <div class="wrapper"> <div class="content"></div> </div> ``` ## 二、通过position和translate ``` <style> .wrapper { position: relative; width: 500px; height: 500px; border: 1px solid red; } .content{ position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid green; } </style> <div class="wrapper"> <div class="content"></div> </div> ``` ## 三、通过flex和justify-content、align-self ``` <style> .wrapper { display: flex; width: 500px; height: 500px; border: 1px solid red; justify-content: center; } .content{ width: 200px; height: 200px; border: 1px solid green; align-self: center; } </style> <div class="wrapper"> <div class="content"></div> </div> ``` ## 四、通过flex和justify-content、align-items ``` <style> .wrapper { display: flex; width: 500px; height: 500px; border: 1px solid red; justify-content: center; align-items: center; } .content{ width: 200px; height: 200px; border: 1px solid green; } </style> <div class="wrapper"> <div class="content"></div> </div> ``` ## 五、通过flex和margin ``` <style> .wrapper { display: flex; width: 500px; height: 500px; border: 1px solid red; } .content{ width: 200px; height: 200px; border: 1px solid green; margin: auto; } </style> <div class="wrapper"> <div class="content"></div> </div> ``` ## 六、通过table-cell ``` <style> .wrapper { display: table-cell; vertical-align: middle; text-align: center; width: 500px; height: 500px; border: 1px solid red; } .content{ display: inline-block; width: 200px; height: 200px; border: 1px solid green; } </style> <div class="wrapper"> <div class="content"></div> </div> ```