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

Posted 2021-05-17 YK菌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS实现盒子居中对齐的七种方法相关的知识，希望对你有一定的参考价值。

文章目录

0. 初始化两个盒子
方法1 定位子绝父相
方法2 flex（推荐）
方法3 table-cell
方法4 inline-block
方法5 JavaScript

日常会用到，面试也会考到~

0. 初始化两个盒子

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

<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

.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%);
}

在这里插入图片描述

【CSS】定位–静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位

方法2 flex（推荐）

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

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

在这里插入图片描述
【CSS】flex布局-弹性盒-伸缩盒-代替浮动

方法3 table-cell

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

在这里插入图片描述
设置子盒子水平居中

.child {
  margin: 0 auto;
}

在这里插入图片描述

方法4 inline-block

子盒子设置成行内块

.child {
  display: inline-block;
}

给父盒子添加

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

在这里插入图片描述
再给子盒子添加

.child {
  vertical-align: middle;
}

在这里插入图片描述

方法5 javascript

给盒子来个id

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

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

写js

<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>