Javascript 如何使用CSS/JS在背景上居中放置等轴测网格

几个月前，我开始积极创建自己的基于HTML/JS的游戏，但由于遇到了一些更具挑战性的问题，进展完全停止了。 其中一个问题如下：

我有一个带有变换的

div

s网格：旋转（-45度）倾斜（15度，15度）我不知道如何在各种屏幕尺寸下保持背景居中

背景图像以如下方式居中：

background-size: cover;
background-position: 50% 50%;

我的问题是网格应该像背景图像一样居中，并保持不变

---

以下各项应以最小400px的宽度和高度居中：

#grid {
    position: absolute;
    width: 400px;
    height: 400px;
    /*the following 4 definitions will center any div that uses absolute positioning*/
    left: 50%;
    top: 50%;
    margin-top:-200px;/*1/2 of the height*/
    margin-left:-200px;/*1/2 of the width*/
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
    -ms-transform: rotate(-45deg) skew(15deg, 15deg);
    transform: rotate(-45deg) skew(15deg, 15deg);

  background-size: 100% 100%;*/
}

基本上是将div放置在中间的技巧，使用负的左边距和右边距，同时为它们指定1/2的宽度/高度

---

希望这有帮助

是的，确实如此！忽视这一点让我觉得有点愚蠢。现在我只需要想一想，当背景开始变焦时，如何保持网格的粘性。@Jonathan这是css中的一个技巧，在任何手册中都不会出现…：）哈哈，我以前用过它，但出于某种原因，歪斜的盒子扭曲了我的思维。是的，所有这些模式都会让你着迷。小心！请随意标记为正确答案，因为我喜欢绿色箭头lol:）当然，尽管你知道如何用动态秤取代400px，但有没有机会？