Vertical align with flexbox

Vertical align with flexbox

HTML

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  
  <body>
  
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>
  

<h1>
Cooking with Sanjee
</h1>

<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/OQXb0yf-J88" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/OQXb0yf-J88" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/OQXb0yf-J88" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

    <div id="chart_div" style="width: 900px; height: 500px;"></div>

</body>

CSS

div {
  height: 400px;
  width: 100%;
  border: solid 1px #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 50px;
  font-align: middle;
}

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }