margin: 0 auto is not working on bootstrap

Question

Here is my code:

<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>

Here is the output:

The problem is "container" div is not centering. I know the "position: absolute" is the main trouble maker but how can i position the div without "position: absolute"? What is the solution?

in Bootstrap, `.container` class already has `margin:0 auto;` set by-default! — Deepak Yadav, Feb 25 '16 at 07:58
Does this answer your question? [How to center a "position: absolute" element](https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element) — Christian Vincenzo Traina, Apr 26 '20 at 22:14

Pradeep Pansari · Accepted Answer · 2016-02-25T08:05:03.937

5

You can use following code for center..

.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>

edited Feb 25 '16 at 08:05

answered Feb 25 '16 at 07:31

Pradeep Pansari

1,287
6
10

score 1 · Answer 2 · edited Apr 26 '20 at 22:06

1

you must define the width of parent div and container then you can use

margin:0 auto;

or if container's width is 70%

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

15% = (100 - container's width) / 2

edited Apr 26 '20 at 22:06

ataravati

8,891
9
57
89

answered Feb 25 '16 at 07:55

Mo Shal

1,587
18
25

Pavindu · Answer 3 · 2018-12-29T09:43:01.940

1

Just use text-align: center; for parent and display: inline-block for the child.It is that simple.For more info, check out this medium article published by freecodecamp.

edited Dec 29 '18 at 09:43

answered Nov 20 '18 at 16:11

Pavindu

2,684
6
44
77

margin: 0 auto is not working on bootstrap

3 Answers3