Vertically Align

Hey I am trying to vertically align on the Tea Cozy Project and it is not working out. I want to use flex to do it. Here is the code

body {
    width: 100%;
    background-color: black;
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    opacity: 0.9;
    margin: 0;
    position: relative;

.container1 {
    display: flex;
    position: relative;
    margin: auto;
    background-image: url("./img-mission-background.jpg");
    background-repeat: no-repeat;
    height: 700px;
    width: 1200px;

.missionheadings {
    background-color: black;
    width: 100%;
    height: 20%;
    text-align: center;
    align-content: center;

and the html

<html <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="flexexperiment.css">
<div class="container1">
    <div class="missionheadings">
        <h2 class="ourmission">Our Mission</h2>
        <h4 class="subheading1">Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>

I set the width to 100% and margin to auto and it centered it vertically. Still unsure how to do it with flex properties…


All those conditionals are obsolete, as are the browsers that they were meant for. Internet Explorer is defunct and the memory of it buried. Thank goodness we no longer need to cater to that class of browser ever again.

Did you try using align-items? You can use it with flex-start, flex-end, center, baseline, and stretch.

More info here: