Where vertical align doesn't work.

:( :( :(

by jshacker

HTML

<p class="lovelyBurntOrange">
  <span>Lovely burnt orange</span>
</p>

SCSS

* {
  margin: 0;
  padding: 0;
}
p {
  padding: 2rem;
  text-align: center;
  background-color: silver;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: 2rem;
    font-weight: 900;
    text-transform: lowercase;
    font-style: italic;
    text-shadow: 1px 1px 2px black;
    line-height: 1;
    padding: 2rem;
    border-radius: 8px;
    background-color: grey;
    display: block;
  }
}