常见的盒子垂直居中的方法
- 利用定位+calc
* { padding: 0; margin: 0; } .box { width: 200px; height: 200px; background: red; position: fixed; top: calc(50% - 100px); left: calc(50% - 100px); text-align: center; }
<div class="box"> </div>
- flex布局
* { padding: 0; margin: 0; } .box{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .item{ width: 200px; height: 200px; background: red; }
<div class="box"> <div class="item"> </div> </div>
- 利用定位+margin
* { padding: 0; margin: 0; } .box { width: 100vw; height: 100vh; position: relative; } .item { width: 200px; height: 200px; background: red; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
<div class="box"> <div class="item"> </div> </div>
- transform
*{ margin:0; padding:0; } .box { width: 100vw; height: 100vh; position: relative; } .item { width: 200px; height: 200px; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<div class="box"> <div class="item"> </div> </div>
- tabel布局
.box{ display: table-cell; width: 100vw; height: 100vh; vertical-align: middle; text-align: center; } .item{ display: inline-block; width: 200px; height: 200px; background: red; }
<div class="box"> <div class="item"> </div> </div>
- grid布局
.box { width: 100vw; height: 100vh; display: grid; place-items: center; } .item{ width: 200px; height: 200px; background: red; }
<div class="box"> <div class="item"> </div> </div>