<div class="banner">
  <div class="banner-text">
    <h1>Flexbox Banner</h1>
    <h3>Perfectly Centered</h3>
    <h6>No matter how many lines of text you use.</h6>
  </div>
</div>
html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  background: #f2f2f2;
}

h1 { font-size: 60px; }
h3 {
  font-size: 32px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 4px;
}
h6 { font-size: 22px; }

.banner h1, .banner h3, .banner h6 {
  margin: 0;
  text-shadow: 2px 2px 6px #000;
  text-align: center;
}

.banner {
  color: white;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/banner-flowers.jpg') top left/cover no-repeat;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.