~~~html <div class="parent"> <div class="child"></div> </div> ~~~ ~~~css div.parent { display: flex; justify-content: center; align-items: center; } ~~~ 1. ~~~css div.parent { position: relative; } div.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 或者 */ ~~~ 2. 定宽高 使用定位+margin ~~~ div.child { width: 50px; height: 10px; position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -5px; } /* 或 */ div.child { width: 50px; height: 10px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } ~~~ 3. ~~~css div.parent { display: grid; } div.child { justify-self: center; align-self: center; } ~~~ 4. ~~~ div.parent { font-size: 0; text-align: center; &::before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; } } div.child{ display: inline-block; vertical-align: middle; } ~~~ 5. ~~~css div.parent{ display:flex; } div.child{ margin:auto; } ~~~ 6. ~~~js div.parent { display:flex; justify-content:center; align-items:center; } ~~~ 还有table table-cell