How to align items to center with flexbox

Question

I'm creating a showcase with bootstrap 4. I want the showcase content to be centered.

so I'm using flexbox with align-items: center;. but for some reason it's not working.

Can some please explain what am I doing wrong?

#showcase {
  position: relative;
  background: url("https://source.unsplash.com/random") no-repeat center center/cover;
  min-height: 350px;
}

#showcase .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#showcase .showcase-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 540px;
  height: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<header id="showcase" class="py-5">
  <div class="overlay text-white text-center">
    <div class="container">
      <div class="showcase-content">
        <h1 class="h2 mb-4">My Heading will go here</h1>
        <div class="header-search w-100">
          <form action="" method="get">
            <input
              type="search"
              name="query"
              placeholder="My input place holder"
              id="query"
              class="form-control"
            />
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

s.kuznetsov · Accepted Answer · 2020-11-23T10:00:44.787

Your container class was not endowed with css rules. So I added flex to it to center it vertically using the justify-content: center rule. And in order to center it vertically, you need to add the rule height: 100%, since the child selector #showcase .showcase-content already contains flex rules, and it makes no sense to prescribe an align-item: center.

Add this selector to your css:

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}

#showcase {
  position: relative;
  background: url("https://source.unsplash.com/random") no-repeat center center/cover;
  min-height: 350px;
}

#showcase .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#showcase .showcase-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 540px;
  height: 100%;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<header id="showcase" class="py-5">
  <div class="overlay text-white text-center">
    <div class="container">
      <div class="showcase-content">
        <h1 class="h2 mb-4">My Heading will go here</h1>
        <div class="header-search w-100">
          <form action="" method="get">
            <input
              type="search"
              name="query"
              placeholder="My input place holder"
              id="query"
              class="form-control"
            />
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

Second solution:

#showcase {
  position: relative;
  background: url("https://source.unsplash.com/random") no-repeat center center/cover;
  min-height: 350px;
}

#showcase .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#showcase .showcase-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 540px;
  height: 100%;
  margin: auto; /*add this it*/
}

.container {
    height: 100%; /*add this it*/
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<header id="showcase" class="py-5">
  <div class="overlay text-white text-center">
    <div class="container">
      <div class="showcase-content">
        <h1 class="h2 mb-4">My Heading will go here</h1>
        <div class="header-search w-100">
          <form action="" method="get">
            <input
              type="search"
              name="query"
              placeholder="My input place holder"
              id="query"
              class="form-control"
            />
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

Please add some explanation to your answer. why would this work? I want to do this without modifying boostrap's container — pofopes, Nov 23 '20 at 09:44
If this `container` class is related to `bootstrap`, then add `!Important` before the `flex` rules so that the `bootstrap` rules don't overlap. — s.kuznetsov, Nov 23 '20 at 09:54
Thanks for the explanation. It worked perfectly! but can we not center the content without modifying boostrap's container class? — pofopes, Nov 23 '20 at 09:55
Yes. I will now give a second solution to this problem without touching the container class. Wait a couple of minutes. — s.kuznetsov, Nov 23 '20 at 09:57
Check out my second solution (second snippet). There I made only two changes. These changes are marked with a css. — s.kuznetsov, Nov 23 '20 at 10:00

score 0 · Answer 2 · answered Nov 23 '20 at 09:42

0

You can give margin: auto; to your showcase-content class or you can give this style to your container:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

But because of you use bootstrap maybe this tip interrupt another codes, so you should make another container for you showcase-content into the container like this:

<div class="container">
    <div class="show-case-container">
      <div class="showcase-content">
</div></div></div>

answered Nov 23 '20 at 09:42

Mahdi D

51
7

Adding `margin: auto;` did nothing. I don't want to modify bootstrap container class – pofopes Nov 23 '20 at 09:48
so i say you can make another container and gave that class to it. – Mahdi D Nov 23 '20 at 11:08

How to align items to center with flexbox

2 Answers2