Vertical center content inside container

The structure you are using has 1 too many container, can you make the structure into this?

- container A
  -- container B
    --- headline 
    --- headline 
    --- headline 
  -- button

1. select container A, use the flexbox alignment matrix to align the container B to center.

2. select the button, set z-index to 2.

3. add a CSS class to the button, eg. stick-to-bottom
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

4. add this CSS, note the 30px is the half of the icon width.

a.gb-button.stick-to-bottom {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 30px);
}

Let me know if this helps!

Hi there,

You can set the top margin of the container to something like -500px to push it up.

However, it seems like the content is still pushed down a bit. I’m not sure what is causing this.

It’s not. It’s right in the middle. It’s visually pushed down as the container is 100vh in height, but the site header pushed the container down, so you can not see the full height of the container, and because of this, the inner container looks like positioned in the lower part of the container.

I removed the header, and you can see the full container:
https://app.screencast.com/vgsGFp6vpfK9w

So the best option is to calculate a proper height for the container, which is 100vh minus the header height. Which means change the min-height of the container from 100vh to calc(100vh - 101px).

You can directly add this into the min-height field.

Mobile header is taller than the desktop header, you need to change themin-heightfor mobile to calc(100% - 122px)

I forgot, it’s been more than one month.

Without seeing your site again, I can’t recall where the value came from.

However, you can try it. Play with the mobile header height and the min-height value to check.

Thank you, so if I’m understanding correctly it’s calc(100vh – [header height])?

That’s correct 🙂

It’s 85.03px both on desktop and mobile.