Question

想知道是否有人可以帮助我，我试图将一个div与HTML页面上的另一个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

从position:absolute;

中删除.jumbotron .container

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

Answer 2

从position: absolute;

中删除.jumbotron .container

这是一个JSFiddle来演示。

Answer 3

取出

position: absolute;

on

.jumboptron .container

Answer 4

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

现在我做了一点JSFIDDLE让你看。

Answer 5

margin: auto仅适用于static定位元素。因此，请从position: absolute;中移除.jumboptron .container，或使用：

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

保证金：自动不适用于HTML / CSS

5 个答案: