HarveyEL HarveyEL - 11 months ago 65
Sass (Sass) Question

Vertically and horizontally aligning a div containing h1 tag and a p tag

I'm trying to horizontally and vertically align my banner text like so:


I have been searching around for the best way possible and have found it very difficult. It could be something really easy that i've missed and wasted a few hours on but I guess that's learning!

This is my html

<header class="fullscreen" style="background-image: url('images/bg.png');">
<div class="logo-wrapper text-center">
<img id="logo" src="" alt="The South-West Skateboarding (SWSB) logo." />
<nav id="primary" class="text-center">
<a href="/">HOME</a> |
<a href="/about">ABOUT</a> |
<a href="/team">TEAM</a> |
<a href="/gallery">GALLERY</a> |
<a href="/forum">FORUM</a> |
<a href="/login">LOGIN</a>
<div id="banner" >
<p>EST. 2016</p>

And css (sorry it's in sass, shouldnt make much of a difference)

header {

padding: 50px 0 50px 0;
height: 100%;

.logo-wrapper {
margin: 0 auto;
width: 100%;

img#logo {
width: 140px;
height: 85px;

nav#primary {
margin-top: 25px;

a {
color: $nav-link-color;
font-weight: 100;
letter-spacing: 2.15px;
text-decoration: none;
text-transform: uppercase;

#banner {
h1 {
margin-bottom: 0;

p {
margin: 0;

Answer Source

Here is the demo

#banner {
    width: 100%;
    height: 400px;
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center