Can't get flexbox to vertically align my content in the center

user_13993582 0
Viewed 115

I just started learning HTML and CSS and have come across this problem where justify-content wont vertically center my elements. My flex-direction is column and even with it as default row and using align-items my elements just wont budge vertically, but horizontally it always works. I'm really just trying to center the text both vertically and horizontally using flex. Also I'm using Firefox and I've tested on Chrome too. Here's the HTML

<div class="brands">
    <section class="YSL">
        <h1>Yves Saint Laurent</h1>
    </section>

    <section class="LV">
        <h1>Louis Vuitton</h1>
    </section>
</div>

And here is my CSS for the elements:

.brands{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.YSL{
    color: black;
    margin: 0;
}

.LV{
    color: black;
    margin: 0;
}
flexbox css html
1 Answers

You need to change your HTML and CSS slightly.

I think this does exactly what you wanted, let me know if there is anything I can improve:

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.brands {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.row {
  border: 1px solid #000000;
}
<div class="brands">
  <div class="row">
    Yves Saint Laurent
  </div>
  <div class="row">
    Louis Vuitton
  </div>
</div>

user_128608950
Related