Content of Page to remain centred (Vertically)

shearerviljoen · May 20, 2020

Hey Guys.

Hoping to find a way to have specific pages take on the entire display of any given screen size, and remain centred.

Here on my website: https://www.shearerviljoen.com/Contact I'm hoping to have both the Contact page, as well as the About page to align centred on any viewing device; laptop, 27" screens, mobile etc. Including vertically.
Also, my contact page is only text, whereas the About page will have an image as well as text. So I'm hoping to find a CSS that can be applied to a separate page, and also to NOT include the footer as I want to have the footer remain at the bottom of the page.

(This will be applied to pages and not Galleries or folders.)

Hope I'm making sense.

Thanks guys.

Hikin' Mike · May 20, 2020

This should get you pretty close:

HTML

<div class="content">

  <h4><a href="mailto:shearerviljoen@gmail.com" target="_self">shearerviljoen@gmail.com</a></h4>

  <div class="section">
    <h4>munich</h4>
    <h4>germany</h4>
    <h4>mobile: +49 152 07663856</h4>
  </div>

  <div class="section">
    <h4>cape town</h4>
    <h4>south africa</h4>
    <h4>mobile: +27 72 3750203</h4>
  </div>

  <h4><a href="https://www.instagram.com/shearerviljoen/" target="_blank">follow me on instagram</a></h4>

</div>

CSS

.content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 80vh;
}

.section {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 20px auto;
}

.content h4 {
  margin: 10px auto;
  font-size: 14px;
}

shearerviljoen · May 21, 2020

Thanks @Hikin' Mike. Worked perfectly. Will try use the HTML and CSS (altering) for my About page which includes an image, and see if I can get to to work. Will let you know how it comes out and/if I need your help on that one too.

Content of Page to remain centred (Vertically)

Comments