水平居中 a <div> 宽度和高度是绝对的

Question

我读了这篇文章，但仍然无法将内部<div>中心：

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}
.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
}

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

它必须与position: absolute;属性有关，但是为了在内部<div>中插入绝对位置<img>元素。

Answer 1

简单，添加此：

.game {
    right: 0;
    left: 0;
    margin: 0 auto;
}

由于宽度给出了left，并且right不会影响您的元素宽度。margin: 0 auto;将执行定位

示例：

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}
.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

Answer 2

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}
.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

Answer 3

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}
.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 0;
  right:0;
  }

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

只是添加

  left: 0;
  right:0;

上游戏课，它将以horziontiment的为中心。这里的诀窍是将位置设置为剩余50％，并剩下余量为容器宽度的一半。让我知道这是否为您解决。

编辑：有用的评论向我表明，我们不需要左侧左右，我们只能将左右属性设置为水平对齐。这更好，因为无论元素的宽度如何

Answer 4

这是另一种方法。

.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}
.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

http://www.codeply.com/go/e0xl0kyoku

Answer 5

您可以将图像用作类游戏的背景

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  height:300px;
  font-family: Verdana;
  text-align: center;
}
.game {
  border: 5px solid black;
  overflow: hidden;
  position:relative;
  left: 0;
  top:28%;
  right: 0;
  margin: auto;
}

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

Answer 6

尝试此

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
}
.game {
  border: 5px solid black;
 width:30%; margin:0 auto; 
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 20px;
  
}

<div>
  <div class="game">
  test
  </div>
</div>