How do I have my flexbox center on a page?

Question

I have been trying to center my flexbox by adding the code into my parent element but it does not work.

What I have now is this and I would like it to be at the center of my page. I would appreciate some guidance!

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 70%;
  box-shadow: 0px 0px 20px 10px rgba(112, 144, 176, 0.2);
  margin: 0;
}

.content1 {
  height: 100%;
  min-width: 0;
  flex-grow: 2;
  /*fills up the space */
  flex-basis: 0;
}

.content-2 {
  height: 100%;
  background-color: #7D8FA1;
  flex-grow: 1;
  flex-basis: 0;
}

.photo1 {
  width: 100%;
  height: 100%;
}

<div class="content">
  <div class="flexbox content-1"><img src="https://live.staticflickr.com/65535/50276010677_4f116d2241_b.jpg" alt="Restaurant design" class="photo1"></div>
  <div class="flexbox content-2">
    <div class="content-mamak">
      <h1 class="header-mamak">Book a consultation</h1>
      <p>Our team will bring your dream to life.</p>
    </div>
  </div>
</div>

I'm afraid you'll need to rephrase your question, it's not really clear to me what you're trying to achieve. A visual representation of where you want to get will help you even quicker. — Kevin, Sep 27 '20 at 16:06
It would be good to remove the arrows from the left edge of your CSS also to make it easier to copy and paste. — Richard Hunter, Sep 27 '20 at 16:10

score 3 · Answer 1 · answered Sep 27 '20 at 16:11

If you mean to center the container inside the body, you can use margin: 15% auto;for the container. The auto side margin will do the horizontal centering, the 15% top simply is derived from your 70% height (100 - 70 / 2)

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 70%;
  box-shadow: 0px 0px 20px 10px rgba(112, 144, 176, 0.2);
  margin: 15% auto;
}

.content1 {
  height: 100%;
  min-width: 0;
  flex-grow: 2;
  /*fills up the space */
  flex-basis: 0;
}

.content-2 {
  height: 100%;
  background-color: #7D8FA1;
  flex-grow: 1;
  flex-basis: 0;
}

.photo1 {
  width: 100%;
  height: 100%;
}

<div class="content">
  <div class="flexbox content-1"><img src="https://live.staticflickr.com/65535/50276010677_4f116d2241_b.jpg" alt="Restaurant design" class="photo1"></div>
  <div class="flexbox content-2">
    <div class="content-mamak">
      <h1 class="header-mamak">Book a consultation</h1>
      <p>Our team will bring your dream to life.</p>
    </div>
  </div>
</div>

If you didn't mean vertical centering, just use margin: 0 auto

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 70%;
  box-shadow: 0px 0px 20px 10px rgba(112, 144, 176, 0.2);
  margin: 0 auto;
}

.content1 {
  height: 100%;
  min-width: 0;
  flex-grow: 2;
  /*fills up the space */
  flex-basis: 0;
}

.content-2 {
  height: 100%;
  background-color: #7D8FA1;
  flex-grow: 1;
  flex-basis: 0;
}

.photo1 {
  width: 100%;
  height: 100%;
}

<div class="content">
  <div class="flexbox content-1"><img src="https://live.staticflickr.com/65535/50276010677_4f116d2241_b.jpg" alt="Restaurant design" class="photo1"></div>
  <div class="flexbox content-2">
    <div class="content-mamak">
      <h1 class="header-mamak">Book a consultation</h1>
      <p>Our team will bring your dream to life.</p>
    </div>
  </div>
</div>

Thank you for answering my question and explaining it :) – user1684750 Sep 28 '20 at 07:46 — user1684750, Sep 28 '20 at 07:46

score 1 · Accepted Answer · answered Sep 27 '20 at 16:08

You can center your parent element by adding margin: auto to the .content class.

.content {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 60%;
     height: 70%;
     box-shadow: 0px 0px 20px 10px rgba(112, 144, 176, 0.2);
     margin: auto; /* margin auto will center the parent horizontally */
}

How do I have my flexbox center on a page?

2 Answers2