如何使用CSS / JS将等距网格置于背景中心

Question

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

我有div s transform: rotate(-45deg) skew(15deg, 15deg);的网格，我无法弄清楚如何在各种屏幕尺寸的背景上保持居中。

背景图像以这样的方式居中：

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

我的问题是网格应该像背景图像一样居中并坚持下去。

JSFiddle

Answer 1

以下应将其居中至少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宽度/高度的技巧。

希望这有帮助！