<div> 垂直置中 / CSS position: relative /position: absolute;

<div> 垂直置中 / CSS position: relative /position: absolute;

<style>
.box{ width: 700px;
      height: 400px;
      border: 1px solid #f00;
      position: relative;
      margin: auto; }

.box6 .txt{ width: 500px;
            font-size: 20px;
            border: 1px solid #f00;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%); }
</style>

<div class="box box6 ">
  <div class="txt">
<pre>.box{ width: 700px;
      height: 400px;
      border: 1px solid #f00;
      position: relative;
      margin: auto; }

.box6 .txt{ width: 500px;
            font-size: 20px;
            border: 1px solid #f00;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%)}<pre>
</div>
</div>
 

<h2>3.absolute + translate(-50%, -50%)</h2> <style> .box{ width: 700px; height: 400px; border: 1px solid #f00; position: relative; margin: auto; } .box6 .txt{ width: 500px; font-size: 20px; border: 1px solid #f00; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); } </style> <div class="box box6 "> <div class="txt"> <pre>.box{ width: 700px; height: 400px; border: 1px solid #f00; position: relative; margin: auto; } .box6 .txt{ width: 500px; font-size: 20px; border: 1px solid #f00; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%)}<pre> </div> </div>

00

Edit