如何使用 class 动态居中 child div？

Question

如何使用 class“居中”动态居中 childdiv。我找不到任何参考资料，也不知道应该搜索什么。

有人知道如何使用 css 或 tailwind 方式吗？

这是下图中的示例输出。（在下面的代码片段中，黑色居中）

.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; }
.violet { background: violet; }

<div class="parent">
  <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 class="child violet"></div>
</div>

这也是我的codepen

Answer 1

您只需使用 NativeJS/jQuery 即可实现此目的。检查以下代码段。

如果您需要进一步的帮助来解决这个问题，请联系我。

您需要以编程方式向 childs 提供 order 值。

$(document).ready(function() {
  var items = $('.parent .child');
  var otherItems = $('.parent .child:not(.center)');
  var centerOrder = parseInt(items.length/2) + 1;
  $('.center').css('order', centerOrder);
  otherItems.each(function(index, item) {
    if(index < otherItems.length/2)
      $(item).css('order', centerOrder - 1);
    else 
      $(item).css('order', centerOrder + 1);
  })
})

.parent {
  height: 500px;
  width: 300px;
  border: 1px solid black;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.child {
  height: 50px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child orange"></div>
  <div class="child yellow"></div>
  <div class="child green"></div>
  <div class="child gray"></div>
  <div class="child violet center"></div>
</div>

Answer 2

既然你提到了 tailwindcss。您可以使用 tailwind 的顺序 https://tailwindcss.com/docs/order 来更改子 div 的顺序。

在下面的这些例子中，您可以先将 child-green 发送到。并用 flex flex-col.

包裹起来

.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; }
.violet { background: violet; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css">

<div class="parent">
  <div class="flex flex-col">
    <div class="child orange"></div>
    <div class="child yellow"></div>
    <div class="child black"></div>
    <div class="child green order-first"></div>
    <div class="child gray"></div>
    <div class="child violet"></div>
  </div>
</div>

Answer 3

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

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

首先我们需要 select parent 元素

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

计算总数child

let totalChild = parent.childElementCount;

找到中间位置

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

Select和class中的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>

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

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

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

let totalChild = parent.childElementCount - 1;

UPDATE: 既然你想根据parentdiv的高度居中显示div，你可以试试这个：

在此代码中，中间位置的计算方法是 div将 Parent div 高度减去 child 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 和 [=102 的中间块的位置之间的差异=] 像这样：

找到差异后，可以将childdiv全部抵消。对于 select 所有 child 元素，我使用容器 div 作为所有 child div 的包装。

将position: relative;添加到parent id，以便child可以计算相对于parent的偏移值。

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

如何使用 class 动态居中 child div？

How to center child div dynamically using class?

css

tailwind-css