How do I align the content to the middle of the page in Bootstrap 4.5?

[mrmbarnes]

Hi All

I want to align the heading and buttons on this page to be in the middle (vertical align center).

https://www.qcstation.com.au/index.php

I seem to be missing some?

What code am I missing? I have tried d-flex and justify-content-center with no luck?

Any help would be great.

Many Thanks

mrmbarnes

[Erik_J]

Hi,

The page’s content seems already centred.

The headings and buttons too it seems.

The logo and nav is separated by space in between.

What did I miss?

[PaulOB]

@Erik_J

What did I miss?

I think the OP wants the heading and buttons in the centre panel vertically centred.

The code is badly managed and uses magic numbers for the sticky footer with heights and negative margins and magic padding. Noe of which are needed when using flexbox.

Assuming I’ve understood correctly then the changes required are as follows.

These are over-rides and new code rather than straight replacemnets of exisiting code.

#main{padding:0;display:flex;flex-direction:column;flex:1 0 0%;}
#footer{height:auto;margin:auto 0 0;}
#master{min-height:0;display:flex;flex-direction:column;flex:1 0 0%;}
body{display:flex!important;min-height:100vh;flex-direction:column;}
#main nav + .container{margin-top:auto;margin-bottom:auto;}

The result will be this.

[mrmbarnes]

Hi… thanks for that… that was exactly what I was chasing… can you also suggest a better way of doing the footer than what I am doing?

[PaulOB]

@mrmbarnes

can you also suggest a better way of doing the footer than what I am doing?

I already fixed that for you In the code above:).

I set up a flexbox sticky footer and removed your magic numbers