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

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>

推荐阅读更多精彩内容

  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 4,513评论 3 28
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,517评论 1 85
  • 总结当前知道的对div嵌套标签水平垂直居中方法,如果还有新的方法,请不吝赐教哦。好,下面开始列举代码咯。首先给需要...
    风铭阅读 1,091评论 0 5
  • 昨晚和母亲打了电话,结果没有人接。那一刻我心里明白,母亲肯定是又去镇子上卖苦力了。心里很不是滋味,自从父亲离开我们...
    陪月亮摘星星阅读 54评论 2 5
  • 现在想起来还隐隐有些不安,内心不断评判自己:你现在也太下作了吧,沦落到和司机男临时工一起去玩麻将,你也太...
    r妞妞阅读 97评论 0 0