<div> 垂直置中 / CSS display: table-cell;

<div> 垂直置中 / CSS display: table-cell;

<h2>1. display: table-cell + vertical-align: middle;</h2> <style> .box{ width: 600px; height: 400px; border: 1px solid #f00; margin: auto; display: table-cell; vertical-align: middle; //text-align: center; } .txt{ width: 400px; font-size: 20px; border: 1px solid #f00; margin: auto; //text-align: center;} </style> <div class="box"> <div class="txt"> <pre>.box{ width: 600px; height: 400px; border: 1px solid #f00; margin: auto; display: table-cell; vertical-align: middle; //text-align: center; } .txt{ width: 400px; font-size: 20px; border: 1px solid #f00; margin: auto; }</pre> </div> </div>

00

Edit