Centered prompt

Welcome to the app!

Thanks for signing up. Let’s take a look around.

Begin tour

Centering content without flexbox usually involves some hacks, like using absolute positioning and then offsetting the centered content with a 2D transform. With flexbox you just need to set 4 properties on the container element:

display: flex which by now we know and love.
flex-direction: column rotates the main axis so that content is laid out vertically instead of horizontally.
justify-content: center groups the children as close as possible to one another, in the center of their container.
align-items: center centers the children along this axis, having a similar effect as settingtext-align: center.

CSS

.centeredPrompt {
  /**
   * Lay out the children of this container with
   * flexbox.
   */
  display: flex;

  /**
   * Rotate the main axis so that the children
   * are laid out vertically, the same as in the
   * above "Side bar" example.
   */
  flex-direction: column;

  /**
   * Instead of pushing the children apart, as in
   * previous examples, we will group them together
   * in the center of their container.
   */
  justify-content: center;

  /**
   * Align the children in the center, along
   * the main axis. Because the direction is
   * "column" this has a similar effect as setting
   * text-align: center.
   */
  align-items: center;

  min-height: 300px;
  padding: 10px;
}

  .centeredPrompt__item + .centeredPrompt__item {
    margin-top: 5px;
  }

    .centeredPromptIcon {
      font-size: 60px;
      line-height: 0;
    }

    .centeredPromptLabel {
      color: #86969C;
      font-size: 30px;
      font-weight: 700;
      text-align: center;
    }

    .centeredPromptDetails {
      color: #86969C;
      font-size: 16px;
      margin-bottom: 10px;
      text-align: center;
    }

.icon {
  color: #BCD2DA;
}

HTML

<div class="centeredPrompt">
  <div class="centeredPrompt__item centeredPromptIcon">
    <div class="icon fa fa-smile-o"></div>
  </div>
  <div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
  <div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let&rsquo;s take a look around.</div>
  <div class="centeredPrompt__item button">Begin tour</div>
</div>

More stuff

If you like my writing you can find more at my blog, cenizal.com. Right now I'm mostly writing about people management, software engineering, and interaction design.