margin：0 auto不能在bootstrap上运行

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>

Answer 2

您必须定义父div和容器的宽度，然后才能使用

margin:0 auto;

或 如果容器的宽度为70％

margin-left:15%; 
margin-right:15%;

15％（100个容器）/ 2

Answer 3

只需为父母使用text-align: center;，为孩子使用display: inline-block。就这么简单。有关更多信息，请查看this medium article published by freecodecamp。