How to center flexbox container?

Question

I'd like to have a horizontally and vertically centered cards. I've done it like this.

*{
    margin: 0;
    padding: 0;
        
    }
    
    .wrapper{
        background-color: darkkhaki;
        width: 700px;
        height: 700px;
        
    
    }
    
    .cards{
        
        display: flex;
        justify-content: center;
        align-items: center;
        
        
        
    }
    
    
    .card{
        width: 100px;
        height: 250px;
        background-color: chartreuse;
        border: crimson 2px solid;
        
    }

<div class="wrapper">
            <div class="text">
                <p>Lorem ipsum</p>
            </div>
            <div class="cards">
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
            </div>
        </div>

However, the vertical center doesn't occur (just the horizontal).

The same happens when I try it with the "text" class.

Thank you for your help :)

you need to expand the height of `cards` to the remaining height or center the `cards` not its content — Temani Afif, Mar 25 '20 at 19:53

score 0 · Accepted Answer · answered Mar 25 '20 at 19:16

In order to center align content, you need at least 1 defined height so the container knows where the "center" is. With flexbox it's as easy then setting justify-content: center and align-items: center to make sure any flex item goes to the center of the container.

What you are missing in your code, is a height for the cards container. You could set a number for it, or just heigth: 100% so it takes the full height of its own container (wrapper) which is 700px

body {
  margin: 0
}

.flex-item {
  border: 1px solid black;
  height: 100px;
  width: 150px
}

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

<div class="flex-container">
  <div class="flex-item"></div>
</div>

Here's your code

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: darkkhaki;
  width: 700px;
  height: 700px;
}

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.card {
  width: 100px;
  height: 250px;
  background-color: chartreuse;
  border: crimson 2px solid;
}

<div class="wrapper">
  <div class="text">
    <p>Lorem ipsum</p>
  </div>
  <div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

score 0 · Answer 2 · answered Mar 25 '20 at 19:22

Simple, set margin: 0 auto; on the main container that holds everything together. In your case, that appears be the main <div> with the wrapper class:

.wrapper {
  background-color: darkkhaki;
  width: 700px;
  height: 700px;
  margin: 0 auto;
}

That should do the trick.

score 0 · Answer 3 · answered Mar 25 '20 at 19:34

0

Simply add the total height (100% or 100h) to the cards class.

.cards{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

answered Mar 25 '20 at 19:34

Saulo Castillos

1
2

How to center flexbox container?

3 Answers3