1.display: flex + justify-content: center + align-items: center;;

<div> 垂直置中 / CSS display:flex

<h2>1.display: flex / justify-content: center / align-items: center;</h2> <style> .box { height: 400px; width: 500px; font-size: 20px; margin: auto; display: flex; justify-content: center; align-items: center; //text-align: center; border:1px solid red; } </style> <div class="box"> <pre>.box { height: 400px; width: 500px; font-size: 20px; margin: auto; display: flex; justify-content: center; align-items: center; //text-align: center; border:1px solid red; }</pre> </div>

00

<h2>2. display: flex / flex-direction: column / align-items: center</h2> <style> .box{ width: 700px; height: 400px; border: 1px solid #f00; margin: auto; display: flex; flex-direction: column; align-items: center; } .box:before{ content: ''; flex-grow: .5; } .content{ width: 400px;font-size: 20px; border: 1px solid #f00; } </style> <div class="box"> <div class="content"> <pre>.box{ width: 700px; height: 400px; border: 1px solid #f00; margin: auto; display: flex; flex-direction: column; align-items: center; } .box:before{ content: ''; flex-grow: .5; } .content{ width: 400px; border: 1px solid #f00; }</pre> </div> </div>

00

<h2>3. display: flex + margin: auto</h2> <style> .box{ width: 600px; height: 400px; border: 1px solid #f00; display: flex; margin: auto; } .content{ width: 400px; font-size: 20px; border: 1px solid #f00; margin: auto; } </style> <div class="box box9"> <div class="content"> <pre>.box{ width: 600px; height: 400px; border: 1px solid #f00; display: flex; margin: auto; } .content{ width: 400px; font-size: 20px; border: 1px solid #f00; margin: auto; }</pre> </div> </div>

00

<h2>4. display: flex + margin: auto + justify-content: center </h2> <style> .box{ width: 600px; height: 400px; border: 1px solid #f00; display: flex; margin: auto; justify-content: center; } .content{ width: 400px; font-size: 20px; border: 1px solid #f00; align-self: center; } </style> <div class="box box9"> <div class="content"> <pre>.box{ width: 600px; height: 400px; border: 1px solid #f00; display: flex; margin: auto; justify-content: center; } .content{ width: 400px; font-size: 20px; border: 1px solid #f00; align-self: center; } </pre> </div> </div>

00

Edit