Div not being centered when using margin: auto; (Bootstrap)

Question

I have a working example website from the bootstrap template website and was analysing the code to understand how they created it. Namely how they centered the text on the first page located here. The code for that snipplet is,

<header class="masthead text-center text-white d-flex"> <!-- Background image set here -->
    <div class="container m-auto">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                   ...
            </div>
            <div class="col-lg-8 mx-auto">
                   ...
            </div>
        </div>
    </div>
</header>

So then I noticed that the m-auto was doing the centering. However, when I attempt to create it from scratch for myself and create this basic code,

 <style>
    #frontpage {
      height: 100vh;
      width: 100vw;
    }
  </style>

<section id="frontpage">
  <div class="container m-auto">
    <div class="row">
      <div class="col-8">
        <h1> YOU CAN DO IT </h1>
      </div>
      <div class="col-8">
        <h1> I should be centered </h1>
      </div>
    </div>
  </div>
</section>

It doesn't center at all. What am I forgetting here?

I would suspect that the container gets centered inside it's parent, which takes up the page.

remove cache and try again, also it will align horizontally, making it align vertically is little more difficult try searching here — Kanishk Tanwar, Dec 30 '18 at 10:13

score 0 · Answer 1 · answered Dec 30 '18 at 11:55

0

you have copied the code but styles not included for them if guess correctly. anyway, I have corrected please try this one.

 <style>
        #frontpage {
          height: 100vh;
          width: 100%;
        }

.center-me{
    margin: auto;
    width: 60%;
    text-align: center;
}
      </style>

    <section id="frontpage">
            <div class="center-me">
                    <div >
                      <h1> YOU CAN DO IT </h1>
                    </div>
                    <div >
                      <h1> I should be centered </h1>
                    </div>
      </div>
    </section>

answered Dec 30 '18 at 11:55

Maheskumar

161
1
11

But this does not use the bootstrap framework, which I was trying to stick towards. – J.Doe Dec 30 '18 at 20:35
Plus its not vertically centered – J.Doe Dec 30 '18 at 20:35
https://stackoverflow.com/questions/12415661/using-marginauto-to-vertically-align-a-div This post says that any flex should be centered using margin: auto; Which makes it think that the d-flex in the original working one made it work, however it didn't when added to mine. – J.Doe Dec 30 '18 at 21:31

David Taiaroa · Answer 2 · 2018-12-31T03:24:06.587

Is this what you're after?
Version 1

https://codepen.io/panchroma/pen/YdEWZJ

HTML

<section id="frontpage">
  <div class="container m-auto">
    <div class="row">
        <div class="col-8">
        <h1> YOU CAN DO IT </h1>
      </div>
      <div class="col-8">
        <h1> I should be centered </h1>
      </div>
      </div>
  </div>
</section>

CSS

#frontpage{
  background-color:pink;
  height: 100vh;
  width: 100vw;
}
.col-8{
  border:1px solid grey;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}

Version 2
This also centers the text vertically
https://codepen.io/panchroma/pen/KbygzX

HTML

<section id="frontpage">
  <div class="container m-auto">
    <div class="row vert-align">
          <div class="col-8">
        <h1>YOU CAN DO IT</h1>
      </div>
      <div class="col-8">
        <h1> I should be centered </h1>
      </div>
      </div>
  </div>
</section>

CSS

#frontpage{
  background-color:pink;
  height: 100vh;
  width: 100vw;
}
.col-8{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}

.row.vert-align{
  position: absolute;
  top: 50%;
  left:50%;
  -ms-transform: translateY(-50%);
  transform: translate(-50%, -50%);
}

No, the container should be vertically and horizontally centered. — J.Doe, Dec 30 '18 at 20:33
Seems to do the trick. The easiest solution I could find was making the frontpage a d-flex, and then margin: auto; for the container. That centered it well and was easily understood. — J.Doe, Jan 01 '19 at 21:54

Div not being centered when using margin: auto; (Bootstrap)

2 Answers2