table方法:

 

<body>
<div style="display: table; border: 1px solid red; width: 800px; height: 800px;">
<div style="display: table-cell; vertical-align: middle; margin: 0 auto">
<div style="border: 1px solid orange; width: 500px; height: 500px; margin: 0 auto;">
</div>
</div>
</div>
</body>

 

 

position方法:

 

<div id="div1" style="width: 500px; height: 500px; border: 1px solid #f00; position: relative;">
<div id="div2" style="width: 200px; height: 200px; border: 1px solid #000; position: absolute;
top: 50%; left: 50%; margin: -100px 0 0 -100px;"
>
</div>
</div>

 

在body中居中:

<body>
<div style="border:1px red solid; width:100px; height:100px; top: 50%; left: 50%; position: absolute; margin: -50px 0 0 -50px;"></div>
</body>

 

相关文章:

  • 2022-12-23
  • 2021-12-06
  • 2022-01-09
  • 2021-12-09
  • 2021-11-21
  • 2022-12-23
  • 2021-08-05
猜你喜欢
  • 2022-12-23
  • 2021-10-19
  • 2022-12-23
  • 2022-01-02
  • 2022-12-23
相关资源
相似解决方案