css盒子居中方法总结

方法一

使用margin

利用外边距将子盒子挤到大盒子的中间位置

缺点是大盒子的大小变化了,子盒子就无法实现居中,需要计算同步修改子盒子的外边距

            .father {
                width: 500px;
                height: 300px;
                margin: 100px auto;
                border: 1px solid #000;
            }

            .son {
                width: 200px;
                height: 100px;
                margin-left: 150px;
                margin-top: 100px;
                background-color: pink;
            }

方法二:位移 translate + 定位 position

定位移动的距离参考的父级的大小

位移移动参考的距离是自己自身的大小

利用父相子绝,向右位移50%,向下位移50%,因为定位参考的大小是父级,这时就会超出了

向上反方向位移自身大小的50%这时子盒子就会居中显示

              .father {
                position: relative;
                width: 500px;
                height: 300px;
                margin: 100px auto;
                border: 1px solid #000;
            }

            .son {
                position: absolute;
                width: 200px;
                height: 100px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); //移动的是相较于自身的50%,水平向右为正方向，垂直向下为正方向,为正值,同理负值为反方向
                background-color: pink;
            }

方法三:flex弹性盒子布局 推荐

利用flex布局就非常的简单轻松

给大盒子设成弹性盒子 ,设置主轴居中justify-content: center和侧轴居中align-items: center就可以实现盒子居中

            .father {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 500px;
                height: 300px;
                margin: 100px auto;
                border: 1px solid #000;
            }

            .son {
                width: 200px;
                height: 100px;
                background-color: pink;
            }

方法四: 脱标, 利用浮动 auto 自动居中

给子盒子上下左右设置为0让其脱标,再给外边距设置auto让其自适应实现自动居中

            .father {
                position: relative;
                width: 500px;
                height: 300px;
                margin: 100px auto;
                border: 1px solid #000;
            }

            .son {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 200px;
                height: 100px;
                background-color: pink;
            }

方法五:将子盒子转成行内块

将子盒子转成行内块,利用vertical-align: middle属性实现居中

            .father {
                width: 500px;
                height: 300px;
                margin: 100px auto;
                border: 1px solid #000;
                text-align: center;
                line-height: 300px;
            }

            .son {
                display: inline-block;
                width: 200px;
                height: 100px;
                background-color: pink;
                vertical-align: middle;
            }

方法六:写js

盒子结构

  <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.querySelector('parent');
    let child = document.querySelector('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>
posted @ 2024-04-26 19:59  dleei  阅读(31)  评论(0)    收藏  举报