Center Div Boxes

Question

I bet this question was asked a hundred times before but i was unable to find a solution for my exact problem. I have 4 Div boxes and they have a max width of 50% and a min width of 400px, so if the site is smaller (eg. on a phone), the boxes align below each other. Now i want to center the boxes if they are below each other (it looks fine while they are side by side). I tried to use
display: table; margin: 0 auto;
but it doesnt work. Another thing I tried was to place everything inside of another div and give them the parameters above and in addition i tried to play with the width of this one (max-content, min-content, auto, fit-content) but it didn't work either. Does anyone know an easy workaround?

Here a short version of my problem:

.format {
  width: 50%;
  float: left;
  height: auto;
  min-width: 500px;
  background-color: lightblue;
  display: table;
  margin: 0 auto;
}

<div class="format">
  <p>Landestrainer</p>
</div>
<div class="format">
  <p>U17</p>
</div>
<div class="format">
  <p>U15</p>
</div>
<div class="format">
  <p>Sonstige</p>
</div>

sorry for my partly bad english. Hopefully, it was not that bad :)

Owenn · Accepted Answer · 2022-05-31T08:18:02.540

I would recommend using display: flex instead to center them. So you would need to put all 4 divs inside a parent div and apply the css below:

.parent-div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

New Edit based on the screenshot given
My approach for this problem would be something like this: Make use of display: flex and @media query

.parent-div {
    // This will divide the page into 2 columns cause of sub-parents
    display: flex;
    align-item: center;
}

.sub-parent{
    display: flex;
    align-items: center;
    flex-direction: column;
}

// @media query means that if the screen becomes smaller than 768px (specified below), then apply the CSS queries which in this case apply flex-direction: column to the "parent-div"  
@media screen and (max-width: 768px) {
    .parent-div {
        flex-direction: column;
    }
}

<div class="parent-div">
    <div class="sub-parent">
        <div class="format">
            <p>Landestrainer</p>
          </div>
          <div class="format">
            <p>U17</p>
          </div>
    </div>
    <div class="sub-parent">
        <div class="format">
            <p>U15</p>
        </div>
        <div class="format">
            <p>Sonstige</p>
        </div>
    </div>
</div>

Here's the link to CSS display: flex guide: Display Flex Guide

when i do this, it looks like this: https://imgur.com/a/bO22evz This is fine in the small version or when the screen is smaller than 800px but when it is opened with a bigger monitor i want it to look like this: https://imgur.com/a/TseXfPS. — Jakob, Oct 19 '21 at 08:03
You need to use media query. So that it would apply your original code when on bigger screen, and media query would apply the ```display: flex``` on smaller screen — Owenn, Oct 19 '21 at 08:11

Center Div Boxes

1 Answers1