(demo)实现盒子居中方式

最新推荐文章于 2023-09-07 08:55:52 发布

vvvvv_2

最新推荐文章于 2023-09-07 08:55:52 发布

阅读量312

点赞数

本文链接：https://blog.csdn.net/qq_36663526/article/details/108395118

版权

htmlcss 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

方法一：知道盒子宽高情况下

.box {
      position: absolute;
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      border: 5px solid bisque;
      top: 50%;
      left: 50%;
      margin-left: -100px;
      margin-top: -100px;
    }

  <div class="box">
    我是box
  </div>

方法二：不清楚盒子宽高情况下，使用transform

.box {
      position: absolute;
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      border: 5px solid bisque;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

  <div class="box">
    我是box
  </div>

方法三：全0

.box {
      position: absolute;
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      border: 5px solid bisque;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

  <div class="box">
    我是box
  </div>

方法四：使用flex，主轴、交叉轴都居中

    html,body {
      height: 100%;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box {
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      border: 5px solid bisque;
    }

  <div class="box">
    我是box
  </div>

方法五：使用js

.box {
      box-sizing: border-box;
      width: 200px;
      height: 200px;
      border: 5px solid bisque;
    }

  <div class="box">
    我是box
  </div>

 //js实现居中：(一屏幕的宽度-盒子的宽度) === left
    let W = document.documentElement.clientWidth;
    let H = document.documentElement.clientHeight;
    let box = document.getElementById('box');
    box.style.position = 'absolute';
    box.style.left = ( W - 200 ) / 2 + 'px';
    box.style.top = ( H -200 ) / 2 + 'px';