盒居中

最新推荐文章于 2023-08-01 11:11:11 发布

前端攻城狮·左大

最新推荐文章于 2023-08-01 11:11:11 发布

阅读量399

点赞数 1

分类专栏： CSS 文章标签：定位 CSS3 transform Flexbox JavaScript display:table-cell

本文链接：https://blog.csdn.net/weixin_46719868/article/details/115457144

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

盒居中

这种需求在项目众是非常常见啊，之前一直用的都是老方法三种定位，之后随着cs3的兴起display：flax是非常方便的一种方法也是用的最多的一种，特别是在移动应用开发的时候来实现，特别强大之后有一段时间看CSDN的时候发现display：table-cell也特别实用但是不常见我感觉还不错就记下了

下面我就整理一下盒居中的几种方法分享给大家

方式1：基于定位的三种常见方法

    html,
    body {
      position: relative; //父盒子绝对定位
      height: 100%;
    }
    .box {
      position: absolute;         //子盒子相对定位
      top: 50%;                   //下移一半
      left: 50%;                  //右移一半
      margin-left: -50px;        //向左移动自身宽度的一半
      margin-top: -25px;         //向上移动自身高度的一半
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: aliceblue;
      font-weight: 1000;
      border-radius: 10px;
      background-color: rgb(5, 5, 5);
    }

在这里插入图片描述
缺点：需要知道盒子具体的宽和高如果盒子的宽和高是动态计算的或是自适应的那么margin就不知道移动多少了

升级版本不考虑移动直接为0

 html,
    body {
      position: relative;
      height: 100%;
    }
    .box {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: aliceblue;
      font-weight: 1000;
      border-radius: 10px;
      background-color: rgb(5, 5, 5);
    }

在这里插入图片描述
优点：无需考虑盒子宽和高
不足之处：需要盒子有宽和高
如果没有的话

在这里插入图片描述
CS3进化版 transform

 html,
    body {
      position: relative;
      height: 100%;
    }
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      line-height: 50px;
      color: aliceblue;
      font-weight: 1000;
      border-radius: 10px;
      background-color: rgb(5, 5, 5);
    }

在这里插入图片描述
优点：不管盒子有没有宽高都中没有宽高的话内容会自动撑开盒子
缺点：不兼容！！兼容性不是很好…

方式2伸缩盒模型 Flex 控制页面上的每一项在XY轴上的排列显示方式

html,
    body {
      display: flex;
      align-items: center;         //控制盒子在Y轴上居中
      justify-content: center;     //控制盒子在X轴上居中
      height: 100%;
    }
    .box {
      text-align: center;
      line-height: 50px;
      color: aliceblue;
      font-weight: 1000;
      border-radius: 10px;
      background-color: rgb(5, 5, 5);
    }

在这里插入图片描述
优缺点同 transform 无需考虑盒子宽高但是兼容性不太ok 移动端经常用
如果公司还在考虑兼容问题IE8以下那么 em。。。。
我只能说你很坚强国企的大佬略过

方式3 JS

1.获取当前屏幕的宽和高
2.获取盒子的宽和高
3.(当前屏幕的宽和高-当前盒子的宽和高)/2 获得top left的值

<body>
    <div class="box" id="box">
      何菊钟
    </div>
  </body>
  <script>
    let HTML = document.documentElement; //获取HTML
    winW = HTML.clientWidth; //一屏幕的宽度
    winH = HTML.clientHeight; //一屏幕的高度
    boxW = box.offsetWidth; //获取盒子的宽度
    boxH = box.offsetHeight; //获取盒子的宽度
    box.style.position = "absolute"; //子盒绝对相对定位
    box.style.left = (winW - boxW) / 2 + "px";
    box.style.top = (winH - boxH) / 2 + "px";
    console.log(winW, winH, boxW, boxH, "winWwinWwinW");
  </script>
  <style>
    html,
    body {
      position: relative;
      height: 100%;
      overflow: hidden;
    }
    .box {
      box-sizing: border-box;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: aliceblue;
      font-weight: 1000;
      border-radius: 10px;
      background-color: rgb(5, 5, 5);
    }

在这里插入图片描述
方式4 display: table-cell; 套用控制文本的属性（不常用）
思路：把盒子display转换一下但是这种方法需要固定父盒子宽和高（规定值百分比等相对值不行）

 body {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width: 500px;
      height: 500px;
      border: 3px solid #000;
    }
    .box {
      display: inline-block;
      box-sizing: border-box;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: aliceblue;
      font-weight: 1000;
      border-radius: 10px;
      background-color: rgb(5, 5, 5);
    }