边距：自动在 HTML/CSS 中不起作用

Question

想知道是否有人可以帮助我我正在尝试在 HTML 页面上将 div 与另一个 div 居中。第一个 div 会很好地居中，但无论我如何处理父 div 中的 div 都不会在我的 CSS 中使用 'margin:auto' 居中。

下面是我的HTML:-

<div class="jumbotron">
  <div class="container">

  </div>
</div>

这是我的 CSS:-

.jumbotron {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 600px;
    background-color: #5a9a9a;
}

.jumbotron .container {
    position: absolute;
    margin: auto;    
    background-color: #5a5a5a;
    width: 500px;
    height: 500px;
}

Answer 1

从 .jumbotron .container

中删除 position:absolute;

margin auto 不适用于绝对定位的元素

Answer 2

从 .jumbotron .container

中删除 position: absolute;

这里有一个JSFiddle来演示。

Answer 3

取出

position: absolute;

于

.jumboptron .container

Answer 4

问题是position: absolute。如您所见，absolute 必须使用实际百分比或像素进行定位。

现在我做了一点JSFIDDLE给大家看看

Answer 5

margin: auto 仅适用于 staticly 定位的元素。因此，要么从 .jumboptron .container 中删除 position: absolute;，要么使用：

.jumbotron .container {
    position: absolute;
    background-color: #5a5a5a;
    width: 500px;
    height: 500px;
    left: 50%;
    margin-left: -250px;
}

边距：自动在 HTML/CSS 中不起作用

Margin: Auto wont work in HTML/CSS

html

css