css - 如何使用类动态地居中子 div？

可能有一种方法可以使用 CSS 框架动态地使 div 居中。
但这是我对这个问题的 Javascript 解决方案：

Note:我已经从父 div 中删除了高度，因为高度在子 div 中是固定的。

首先我们需要选择父元素

let parent = document.querySelector("#parent");

计算孩子总数

let totalChild = parent.childElementCount;

找到中间位置

const middle = Math.floor(totalChild / 2);

选择具有类中心的 div

let centerDiv = document.querySelector("#parent .center");

删除中心 div

parent.removeChild(centerDiv);

将中心 div 插入到 parent 的中间位置

parent.insertBefore(centerDiv, parent.children[middle]);

这是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #parent {
        width: 300px;
        border: 1px solid black;
        overflow-y: hidden;
      }

      .child {
        height: 100px;
      }

      .orange {background: orange;}
      .yellow {background: yellow;}
      .black {background: black;}
      .green {background: green;}
      .gray {background: gray;}
      .violet {background: violet;}
    </style>
  </head>
  <body>
    <div id="parent">
      <div class="child orange"></div>
      <div class="child yellow"></div>
      <div class="child black"></div>
      <div class="child green"></div>
      <div class="child gray"></div>
      <div class="child violet center"></div>
    </div>

    <script>
      // STEP 1: select parent div
      let parent = document.querySelector("#parent");

      // STEP 2: calculate total number of child
      let totalChild = parent.childElementCount;

      // STEP 3: find middle position
      const middle = Math.floor(totalChild / 2);

      // STEP 4: Select the div with class center
      let centerDiv = document.querySelector("#parent .center");

      // STEP 5: Delete the center div
      parent.removeChild(centerDiv);

      // STEP 6: Insert the center div to the middle position of parent
      parent.insertBefore(centerDiv, parent.children[middle]);
    </script>
  </body>
</html>

如果父 div 中有 5 个（奇数）元素：
索引 2 将是中间元素

如果父 div 中有 6 个（偶数）元素：
索引 3 将是中间元素

如果在有 6 个（偶数）元素时需要索引 2，则可以在步骤 2 中从 totalCount 中减去 1。

let totalChild = parent.childElementCount - 1;

UPDATE: 由于您想根据父 div 的高度居中显示 div，您可以尝试以下操作：

在此代码中，中间位置是通过将父 div 高度除以子 div 高度来计算的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #parent {
        height: 500px;
        width: 300px;
        border: 1px solid black;
        overflow-y: hidden;
      }

      .child {
        height: 100px;
      }

      .orange {background: orange;}
      .yellow {background: yellow;}
      .black {background: black;}
      .green {background: green;}
      .gray {background: gray;}
    </style>
  </head>
  <body>
    <div id="parent">
      <div class="child orange center"></div>
      <div class="child yellow"></div>
      <div class="child black"></div>
      <div class="child green"></div>
      <div class="child gray"></div>
    </div>

    <script>
      // STEP 1: select parent and child div
      let parent = document.querySelector("#parent");
      let child = document.querySelector(".child");

      // STEP 2: calculate height of parent and child div
      let parentHeight = parent.clientHeight;
      let childHeight = child.clientHeight;

      // STEP 3: Total number of blocks that needs to be there
      const totalBlocks = Math.floor(parentHeight / childHeight);

      // STEP 4: Find the middle block
      const middle = Math.floor(totalBlocks / 2);

      // STEP 5: Select the div with class center
      let centerDiv = document.querySelector("#parent .center");

      // STEP 6: Delete the center div
      parent.removeChild(centerDiv);

      // STEP 7: Insert the center div to the middle position of parents height
      parent.insertBefore(centerDiv, parent.children[middle]);
    </script>
  </body>
</html>

UPDATE:查看您发布的图像，您可以做的是找到需要居中的div与父级中间块的位置之间的差异，如下所示：

找到差异后，您可以抵消所有子div。为了选择所有子元素，我使用了一个容器 div 作为所有子 div 的包装器。

添加position: relative;到父 id 以便子可以计算相对于父的偏移值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      #parent {
        height: 500px;
        width: 300px;
        border: 1px solid black;
        overflow-y: hidden;
        position: relative;
      }

      .child {
        height: 100px;
      }

      .orange {background: orange;}
      .yellow {background: yellow;}
      .black {background: black;}
      .green {background: green;}
      .gray {background: gray;}

    </style>
  </head>
  <body>
    <div id="parent">
      <div id="container">
        <div class="child orange"></div>
        <div class="child yellow"></div>
        <div class="child black"></div>
        <div class="child green center"></div>
        <div class="child gray"></div>
      </div>
    </div>

    <script>
      // Select parent, child container and child div
      let parent = document.querySelector("#parent");
      let child = document.querySelector(".child");
      let childContainer = document.querySelector("#container");

      // STEP 1: find the middle position of block in the parent div
      let parentHeight = parent.clientHeight;
      let childHeight = child.clientHeight;

      let totalBlocks = Math.floor(parentHeight / childHeight); // 5
      let middleBlock = Math.floor(totalBlocks / 2); // 2
      let middlePosition = middleBlock * childHeight; // 200px

      // STEP 2: Find the position of div that needs to be in the center.
      let centerDivPosition = document.querySelector(".center").offsetTop; // 300px

      // Step 3: find the difference between them
      let offestValue = middlePosition - centerDivPosition; // -100

      // Step 4: offset the container position
      childContainer.style.position = "relative";
      childContainer.style.top = `${offestValue}px`;
    </script>
  </body>
</html>

css - 如何使用类动态地居中子 div？

问题描述

解决方案

推荐阅读