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

【问题标题】：Horizontally center a <div> which width and height are absolute水平居中的 <div> 宽度和高度是绝对的
【发布时间】：2017-02-16 23:35:15
【问题描述】：

我阅读了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> 中插入绝对位置<img> 元素所必需的。

【问题讨论】：

为什么需要position: absolute？
我需要它插入<img> 元素，其位置在内部<div> 中是绝对的。问题已编辑。
那么你应该在div.game上使用position: relative，并且可以在imgs上使用position: absolute。
text-align 只会居中 inline 元素 - div 元素不是内联，它们是 block。要将 div 居中在另一个 div 中，您通常会在子对象上使用 margin: 0 auto;，但是，这不适用于 position: absolute;。您能否发布一张图片或其他内容，以帮助我们了解您的需求？我有一种感觉，你以错误的方式处理这个问题。
只有<img> 元素有position: absolute; 属性时不起作用。 <div> 元素也必须有它。编辑：是的，也许我走错路了。我要发一张图片。

标签： html css centering

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;

到游戏类，它将水平居中。这里的技巧是将位置设置为向左 50%，向左设置边距为容器宽度的负 1。让我知道这是否可以为您解决问题。

编辑：有用的 cmets 向我展示了我们不需要左负边距，我们可以设置 left 和 right 属性用于水平对齐。这更好，因为无论元素的宽度如何，它都可以工作

【讨论】：

margin-left: -50px;真的吗？
横向有更好的解决方案。至于垂直对齐，这是一个可靠且简单的解决方案。

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：