What is the best way to center a parent container vertically?

Question

What is the best way to center a parent container vertically?

I currently have a main grid with grid items that are also containers, set as inline-sized containers to allow for different internal layouts based on their width.

How can I horizontally align the main grid in the center once it exceeds a certain width? Attempts using justify-self: center and margin: 0 auto on the main grid result in layout issues - these can easily be observed by uncommenting those lines in the code below. The same issue arises when trying justify-content: center on either the main grid or the body element.

To see the current behavior above the max-width set for the main grid in action, expand the snippet below and resize the viewport: the grid stays left-aligned instead of being horizontally centered. My goal is to keep it positioned in the middle while preventing the layout from collapsing.

css layout css-grid container-queries

Answer 1

Answer №1

After receiving a suggestion from @deEr to adjust the main element's width, an idea struck me. In order for main to remain flexible up to a certain point, it could be assigned a max-width value to limit its growth.

However, an alternative approach would be to use width: min(100%, 800px) instead of setting a max-width. By including box-sizing: border-box to prevent overflow due to padding, suddenly all my previous unsuccessful attempts started working!

This simple adjustment was the key to unlocking the functionality I had been struggling with. It goes to show that sometimes, thinking outside the box can lead to unexpected solutions.

Answer 2

After receiving a suggestion from @deEr to adjust the main element's width, an idea struck me. In order for main to remain flexible up to a certain point, it could be assigned a max-width value to limit its growth.

However, an alternative approach would be to use width: min(100%, 800px) instead of setting a max-width. By including box-sizing: border-box to prevent overflow due to padding, suddenly all my previous unsuccessful attempts started working!

This simple adjustment was the key to unlocking the functionality I had been struggling with. It goes to show that sometimes, thinking outside the box can lead to unexpected solutions.

Answer 3

Answer №2

Using width: 100% is another option

addEventListener('input', e => {
    document.body.style = `--${e.target.id}: 1`
})

/* basic reset, grid everything */
* { margin: 0; padding: 0 }
html,body, main, section, div, ul, figure { display: grid }
html { min-height: 100% }

body {
    /* body stle may override these two; 
     * they're mutually exclusive */
    /* 1 if images are _N_ext to each other, 0 otherwise */
    --_n: var(--n, 0);
    /* 1 if images are _S_tacked, 0 otherwise */
    --_s: var(--s, 0);
    
    font: clamp(.75em, 3.375vw, 1.25em)/ 1.25 sans-serif;
}

main {
    grid-gap: .5em;
    place-self: center;
    padding: .5em;
    max-width: 800px;
    Using width: 100%;
    box-sizing: border-box;
}

/* CSS variable indices for similar items */
:is(input, label, li, figure):nth-of-type(1) { --i: 0 }
:is(input, label, li, figure):nth-of-type(2) { --i: 1 }
:is(input, label, li, figure):nth-of-type(3) { --i: 2 }
:is(input, label, li, figure):nth-of-type(4) { --i: 3 }

.ctr {
    grid-gap: inherit;
    padding: inherit;
    background: gainsboro;
}

div { grid-gap: inherit }

.one, .two, .res {
    container-type: inline-size;
    
    * {
        /* a bunch of container size cases */
        --_cs0: var(--cs0, 1);
        --_cs1: var(--cs1, calc(1 - var(--_cs0)));
        --_cs2: var(--cs2, calc(1 - (var(--_cs0) + var(--_cs1))));
    }
}

/* SECTION 1 */
.boo, .foo {
    @container (min-width: 23em) { --cs0: 0 }
    @container (min-width: 32em) { --cs1: 0 }
}

.boo {
    grid-column: calc(2 - var(--_cs1))/ span calc(1 + var(--_cs1))
}

li {
    grid-column: calc(1 + var(--_cs1)*var(--i))
}

.foo {
    grid-area: calc(1 + var(--_cs1))/ 1;
    grid-template-columns: repeat(2, max-content)
}

.xtra {
    overflow: hidden;
    width: calc((1 - var(--_cs0))*9em)
}


/* SECTION 2 */
[name='c'], [for] {
    grid-area: 
        calc(1 + var(--i)*var(--_cs0))/ 
        calc(1 + var(--i)*var(--_cs1));
    
    @container (min-width: 20em) { --cs0: 0 }
}



/* SECTION 4 */
figure {
    grid-area: calc(1 + var(--_cs0)*var(--i)*var(--_n))/ 
        calc(1 + var(--_cs1)*var(--i)*var(--_n));
    max-width: 400px;
    aspect-ratio: 2/ calc(2 + var(--_s) + var(--_cs1)*var(--_n));
    
    @container (min-width: 20em) { --cs0: 0  }
}

img {
    Using width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--pos)
}

<body style="--n: 1">
  <main>
    <section class="ctr one">
      <ul class="boo">
        <li>listitem</li>
        <li>listitem</li>
          <li>listitem</li>
        <li>listitem</li>
      </ul>
      <div class="foo">
        <div class="xtra">superfluous</div>
        <div class="main">
          <div>some</div>
          <div>essential</div>
          <div>shit</div>
          <div>keep it!</div>
        </div>
      </div>
    </section>
    <section class="ctr two">
      <input id="n" type="radio" name="c" checked="checked"/>
      <label for="n">side by side</label>
      <input id="s" type="radio" name="c"/>
      <label for="s">stacked</label>
    </section>
    <section class="ctr tre">
      <div>more stuff</div>
    </section>
    <section class="res">
      <figure><img src="https://images.unsplash.com/photo-1705630547844-29adf8323f28?w=800"/></figure>
      <figure><img src="https://images.unsplash.com/photo-1705630547844-29adf8323f28?w=800"/></figure>
    </section>
  </main>
</body>

Answer 4

Using width: 100% is another option

addEventListener('input', e => {
    document.body.style = `--${e.target.id}: 1`
})

/* basic reset, grid everything */
* { margin: 0; padding: 0 }
html,body, main, section, div, ul, figure { display: grid }
html { min-height: 100% }

body {
    /* body stle may override these two; 
     * they're mutually exclusive */
    /* 1 if images are _N_ext to each other, 0 otherwise */
    --_n: var(--n, 0);
    /* 1 if images are _S_tacked, 0 otherwise */
    --_s: var(--s, 0);
    
    font: clamp(.75em, 3.375vw, 1.25em)/ 1.25 sans-serif;
}

main {
    grid-gap: .5em;
    place-self: center;
    padding: .5em;
    max-width: 800px;
    Using width: 100%;
    box-sizing: border-box;
}

/* CSS variable indices for similar items */
:is(input, label, li, figure):nth-of-type(1) { --i: 0 }
:is(input, label, li, figure):nth-of-type(2) { --i: 1 }
:is(input, label, li, figure):nth-of-type(3) { --i: 2 }
:is(input, label, li, figure):nth-of-type(4) { --i: 3 }

.ctr {
    grid-gap: inherit;
    padding: inherit;
    background: gainsboro;
}

div { grid-gap: inherit }

.one, .two, .res {
    container-type: inline-size;
    
    * {
        /* a bunch of container size cases */
        --_cs0: var(--cs0, 1);
        --_cs1: var(--cs1, calc(1 - var(--_cs0)));
        --_cs2: var(--cs2, calc(1 - (var(--_cs0) + var(--_cs1))));
    }
}

/* SECTION 1 */
.boo, .foo {
    @container (min-width: 23em) { --cs0: 0 }
    @container (min-width: 32em) { --cs1: 0 }
}

.boo {
    grid-column: calc(2 - var(--_cs1))/ span calc(1 + var(--_cs1))
}

li {
    grid-column: calc(1 + var(--_cs1)*var(--i))
}

.foo {
    grid-area: calc(1 + var(--_cs1))/ 1;
    grid-template-columns: repeat(2, max-content)
}

.xtra {
    overflow: hidden;
    width: calc((1 - var(--_cs0))*9em)
}


/* SECTION 2 */
[name='c'], [for] {
    grid-area: 
        calc(1 + var(--i)*var(--_cs0))/ 
        calc(1 + var(--i)*var(--_cs1));
    
    @container (min-width: 20em) { --cs0: 0 }
}



/* SECTION 4 */
figure {
    grid-area: calc(1 + var(--_cs0)*var(--i)*var(--_n))/ 
        calc(1 + var(--_cs1)*var(--i)*var(--_n));
    max-width: 400px;
    aspect-ratio: 2/ calc(2 + var(--_s) + var(--_cs1)*var(--_n));
    
    @container (min-width: 20em) { --cs0: 0  }
}

img {
    Using width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--pos)
}

<body style="--n: 1">
  <main>
    <section class="ctr one">
      <ul class="boo">
        <li>listitem</li>
        <li>listitem</li>
          <li>listitem</li>
        <li>listitem</li>
      </ul>
      <div class="foo">
        <div class="xtra">superfluous</div>
        <div class="main">
          <div>some</div>
          <div>essential</div>
          <div>shit</div>
          <div>keep it!</div>
        </div>
      </div>
    </section>
    <section class="ctr two">
      <input id="n" type="radio" name="c" checked="checked"/>
      <label for="n">side by side</label>
      <input id="s" type="radio" name="c"/>
      <label for="s">stacked</label>
    </section>
    <section class="ctr tre">
      <div>more stuff</div>
    </section>
    <section class="res">
      <figure><img src="https://images.unsplash.com/photo-1705630547844-29adf8323f28?w=800"/></figure>
      <figure><img src="https://images.unsplash.com/photo-1705630547844-29adf8323f28?w=800"/></figure>
    </section>
  </main>
</body>

Answer 5

Answer №3

A more effective way to center the main tag in CSS is to use only the width property instead of max-width, and employ the view-port unit (vw) for responsiveness. You can then apply the justify-self property in your CSS.

Here's the corrected CSS:

main {
    grid-gap: .5em;
    padding: .5em;
    justify-self: center;
    max-width: 800px;
    width: 80vw;
}

This approach will help you properly center the main section.

Answer 6

A more effective way to center the main tag in CSS is to use only the width property instead of max-width, and employ the view-port unit (vw) for responsiveness. You can then apply the justify-self property in your CSS.

Here's the corrected CSS:

main {
    grid-gap: .5em;
    padding: .5em;
    justify-self: center;
    max-width: 800px;
    width: 80vw;
}

This approach will help you properly center the main section.

What is the best way to center a parent container vertically?

Answer №1

Answer №2

Answer №3

Similar questions

I'm having trouble getting my button to float correctly on the right side

The HTML element update event was not triggered due to the excessive load of a JavaScript function

In order to position content at the center of a <div> element

Ways to display distinct text boxes based on selected radio button?

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

What causes Next.JS to automatically strip out CSS during the production build process?

How can I achieve a transparent background for a radio button in Chrome?

Integrate an input field with a copy function similar to the GitHub clone view

Buttons are misaligned and do not align on a straight line

Choosing between JavaScript and Handlebars.js depends on the specific needs

How deep can nesting go within a CSS rule?

How can I transform an HTML element into a textarea using CSS or JavaScript?

The MUI snackbar element lingers in the DOM even after it has been closed

Is there a way to relocate the play again button below the box?

The CSS list formatting does not seem to be compatible with Bootstrap 4

Use PHP to highlight the row that has been selected in an HTML table

Are there any class options that offer a wider width than modal-lg?

My Javascript file is not being recognized by MVC

Image displayed in tooltip when hovering over

How to toggle elements using CSS slide animations?