javascript - 如何使用CSS/JS在背景上将等距网格居中

几个月前，我开始着手创建自己的基于HTML / JS的游戏，但是由于遇到了一些更具挑战性的问题，进展完全停止了。
这些问题之一如下:

我有这个div和transform: rotate(-45deg) skew(15deg, 15deg);的网格，我不知道如何在各种屏幕尺寸的背景下保持居中。
背景图像正好与此相对:

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

我的问题是网格应像背景图像一样居中并坚持使用。
JSFiddle

最佳答案

以下内容应将其居中放置至少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。

希望这可以帮助!