对于一个未知宽高的盒子，如何让它水平垂直居中于父元素？

2018-04-20 本文已影响0人 mmqhn

1. table

display: table;使父元素的作用像table元素一样，display: table-cell;使子元素的作用像td一样。给此时的子元素用vertical-align和text-align设置水平垂直居中，子元素其中的未知宽高的元素当然就相对子元素水平垂直居中了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .table {
        display: table;
      }
      .cell {
        display: table-cell;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        vertical-align: middle;
        text-align: center;
      }
      .cell span {
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <div class="table">
      <div class="cell">
        <!--span是未知宽高，需水平垂直居中的元素-->
        <span>hahaha</span>
      </div>
    </div>
  </body>
</html>

2. JS计算

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .parent {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
      }
      .child {
        position: absolute;
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">hahaha</div>
    </div>
    <script>
      var child = document.querySelector('.child');
      var parent = child.parentNode;
      child.style.left = (parent.offsetWidth - child.offsetWidth) / 2 + 'px';
      child.style.top = (parent.offsetHeight - child.offsetHeight) / 2 + 'px';
    </script>
  </body>
</html>

3. transform

transform:translate(tx[,ty])

定义2D转换。tx表示x方向偏移，ty表示y方向偏移。如果tx,ty为百分比的话，其参考值是元素本身的宽高，正适合未知宽高的居中定位。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .parent {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
      }
      .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">hahaha</div>
    </div>
  </body>
</html>

4. flexbox（弹性容器布局）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .parent {
        display: flex;
        justify-content: center; /* 设置弹性容器的item在主轴上居中 */
        align-items: center; /* 设置弹性容器的item在交叉轴上居中 */
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
      }
      .child {
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">hahaha</div>
    </div>
  </body>
</html>

5. grid（网格布局）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .parent {
        display: grid;
        justify-items: center; /* 在行中的对齐方式 */
        align-items: center; /* 在列中的对齐方式 */
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
      }
      .child {
        background: #ddd;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">hahaha</div>
    </div>
  </body>
</html>