margin: 0 auto 在引导程序上不起作用

Question

这是我的代码：

<div class="container-fluid">
        <div class="carousel slide" data-ride = "carousel" style="position: relative">
            <div class="carousel-inner" role="listbox">
                 <div class="item active">
                 <img src="images/slide-1.jpg">
                 </div>
                 <div class="item">
                 <img src="images/slide-2.jpg">
                 </div>
                 <div class="item">
                 <img src="images/slide-3.jpg">
                 </div>
            </div>
        </div>
        <div class="container" style="background-color:#fff; top: 50px; margin: 0 auto;">
            <h1>Hello</h1>
        </div>
</div>

这是输出：

问题是“容器”div 没有居中。我知道“位置：绝对”是主要的麻烦制造者，但是如何在没有“位置：绝对”的情况下定位 div？解决办法是什么？

Answer 1

您可以使用以下代码作为中心..

.container{
  background-color:#fff; 
  position: absolute; 
  top: 50px; 
  left:50%;
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
}

<div class="container">
        <h1>Hello</h1>
</div>