CSS实现盒子居中对齐的七种方法

最新推荐文章于 2024-07-23 14:07:14 发布

Moony (考研版)

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量5.1k

点赞数 2

分类专栏： css html js 文章标签： css css3 html 前端 javascript

本文链接：https://blog.csdn.net/moony_wy/article/details/122765030

版权

js 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

初始化两个盒子

  <style>
    .parent {
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    .child {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>

<body>
  <div class='parent'>
    <div class='child'></div>
  </div>
</body>

方法1 定位子绝父相

子绝父相

.parent {
  position: relative;
}

.child {
  position: absolute;
}

方法1.1 margin 纯计算（不推荐）

父盒子宽度的一半减去子盒子宽度的一半 500/2 - 200/2 = 150
父盒子高度的一半减去子盒子高度的一半 500/2 - 200/2 = 150

.child {
  margin-top:150px;
  margin-left:150px;
}

方法1.2 margin设置为auto

.child {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
}

方法1.3 transform

.child {
  position: absolute;
  top: 50%;
  left: 50%
}

再让子盒子往“回”移动自己宽高的一半

.child {
  transform: translate(-50%, -50%);
}

方法2 flex（推荐）

将父盒子设置成弹性盒容器
让子元素水平居中，垂直居中

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法3 table-cell

.parent {
    display: table-cell;
    vertical-align: middle;
}

设置子盒子水平居中

.child {
  margin: 0 auto;
}

方法4 inline-block

子盒子设置成行内块

.child {
  display: inline-block;
}

给父盒子添加

* text-align: center; 只对行内元素和行内块元素有用

.parent {
  text-align: center;
  line-height: 500px;
}

再给子盒子添加

.child {
  vertical-align: middle;
}

方法5 JavaScript

给盒子来个id，然后开始写js代码

  <style>
    .parent {
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    .child {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>

<body>
  <div class='parent' id='parent'>
    <div class='child' id='child'></div>
  </div>
  <script>
    let parent = document.getElementById('parent');
    let child = document.getElementById('child');
    let parentW = parent.offsetWidth;
    let parentH = parent.offsetHeight;
    let childW = child.offsetWidth;
    let childH = child.offsetHeight;
    parent.style.position = "relative"
    child.style.position = "absolute";
    child.style.left = (parentW - childW) / 2 + 'px';
    child.style.top = (parentH - childH) / 2 + 'px';
  </script>
</body>