How to center element using flexbox when the div has width?

Question

I am trying to center a div using flexbox, but when I set the div's width it gets pushed all the way to the left. I have tried setting the parent div's width to 50% and creating a child div and applying the flexbox styling to it, but this doesn't work either.

.App {
  width: 50%;
}

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

<div class="App">
  <div class="container">
    <h1>Test</h1>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget ligula varius, malesuada sapien vel, suscipit diam. Proin eu porttitor mauris. Vivamus lacinia, turpis ut tincidunt luctus, neque justo tempus arcu, vel congue quam eros at ante. Aliquam lobortis mollis orci eget ultrices. Nunc vitae dolor at quam elementum dignissim.</span>
  </div>
</div>

`.App` is not a flex container here (but makes no difference), `margin:auto` is just fine fine for a block — G-Cyrillus, Jul 30 '20 at 18:54

score 1 · Answer 1 · answered Jul 30 '20 at 18:47

for your case, if you use margin auto for the app, which has a width of 50, you can average it.

.App {
  width: 50%;
  margin:auto;
}

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

<div class="App">
      <div class="container">
        <h1>Test</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget ligula varius, malesuada sapien vel, suscipit diam. Proin eu porttitor mauris. Vivamus lacinia, turpis ut tincidunt luctus, neque justo tempus arcu, vel congue quam eros at ante. Aliquam lobortis mollis orci eget ultrices. Nunc vitae dolor at quam elementum dignissim.</span>
      </div>
    </div>

Michael Benjamin · Accepted Answer · 2020-07-30T19:08:08.463

Simple solution:

Add margin: 0 auto to the .App element.

With auto margins applied on the left and right, space will be evenly distributed on both sides, centering the element.

From the specification:

§ 10.3.3 Block-level, non-replaced elements in normal flow

If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

But if you want to use flexbox...

Apply flex properties to the container of .App.

body {
  display: flex;
  justify-content: center;
}

.App {
  width: 50%;
}

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

<div class="App">
  <div class="container">
    <h1>Test</h1>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget ligula varius, malesuada sapien vel, suscipit diam. Proin eu porttitor mauris. Vivamus lacinia, turpis ut tincidunt luctus, neque justo tempus arcu, vel congue quam eros at ante. Aliquam lobortis mollis orci eget ultrices. Nunc vitae dolor at quam elementum dignissim.</span>
  </div>
</div>

How to center element using flexbox when the div has width?

2 Answers2