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

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

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

00

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

00

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

00

Edit