css - 如何使用 CSS3 使嵌套的 div 居中旋转？

Question

我正在尝试使用 css mix-blend-mode 属性来叠加具有差异的 div，从而制作国际象棋图案。但我的问题是如何优雅地将所有内容居中。

这是我的代码:

var n = 20;
var s = 300;

for (var x = 1; x < n; x++) {
  $("div").last().append("<div/>");
}

$("div").css({"transform": "rotate(" +  (360 / n) + "deg) translate(-30%, -30%)",
              "width": s,
              "height": s});

body {
  background-color: black;
  overflow: hidden;
}

div {
  mix-blend-mode: difference;
  background-color: white;
  position: absolute;
  top: 30%;
  left: 30%;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

关于如何完美居中的任何想法？

编辑:我希望国际象棋 donut 的洞位于页面中央。

Answer 1

不确定这 100% 是否适用于您的情况，但如果您可以将这些 div 放在一个容器中，该容器以相对于页面的绝对定位为中心，那么您可以很容易地将圆环孔居中。如果 s 和 translate 值是常量，它将是这样的:

HTML:

<section>
<div></div>
</section>

CSS:

section {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px; /* half of s */
  margin-left: -100px; /* half of s */
}

div {
  mix-blend-mode: difference;
  background-color: white;
  position: absolute;
  left: 30%; /* same as translate value */
  top: 30%; /* same as translate value */
  border-radius: 50%;
}

Fiddle

否则你必须用 JS 来设置它们，像这样:

var n = 20;
var s = 200;
var t = "30%";
for (var x = 1; x < n; x++) {
  $("div").last().append("<div></div>");
}

$("div").css({"transform": "rotate(" +  (360 / n) +  "deg) translate(-" + t + ", -" + t + ")",
              "width": s,
              "height": s, 
              "left": t,
              "top": t});
$("section").css({"margin-left": s / -2 + "px",
                  "margin-top": s / -2 + "px"})

Fiddle