前端实现水平垂直居中几种方法总结

最新推荐文章于 2024-05-17 03:01:40 发布

qianlingvip

最新推荐文章于 2024-05-17 03:01:40 发布

阅读量863

点赞数 1

文章标签： html 前端布局 css

本文链接：https://blog.csdn.net/zhangqling/article/details/115725964

版权

以下所有实例都是基于这种DOM结构完成的

  <div class="box">
    <div class="son">12</div>
  </div>

1、使用position: absolute实现

	.box{
      height: 100vh;
      width: 100vw;
      position: relative;
    }
    .box .son{
      width: 20%;
      height: 20%;
      background: aqua;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

2、网格布局

	.box{
      height: 100vh;
      width: 100vw;
      display: grid;
      place-items: center;
    }
    .box .son{
      width: 20%;
      height: 20%;
      background: aqua;
    }

3、flex布局

	.box{
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box .son{
      width: 20%;
      height: 20%;
      background: aqua;
    }

4、表格布局vertical-align: middle;

	.box{
      height: 100vh;
      width: 100vw;
      display: table-cell;
      vertical-align: middle;
    }
    .box .son{
      width: 20%;
      height: 20%;
      background: aqua;
      margin: 0 auto;
    }

5、margin: auto

	.box{
      height: 100vh;
      width: 100vw;
    }
    .box .son{
      width: 20%;
      height: 20%;
      background: aqua;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }