水平居中 a <div> which width and height are absolute

Question

我读了 this post 但仍然无法将内部 <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>.[=18 中插入绝对位置 <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;

到游戏class，它将水平居中。这里的技巧是将位置设置为左侧 50%，并将左侧边距设置为容器宽度的负 1 的一半。如果这能为您解决问题，请告诉我。

编辑：有用的评论告诉我我们不需要负边距，我们可以设置水平对齐的左右属性。这样更好，因为无论元素的宽度如何，它都可以工作

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

您可以使用图片作为class游戏的背景

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>

水平居中 a <div> which width and height are absolute

Horizontally center a <div> which width and height are absolute

html

css

centering

示例：