HTML Element Style How to - Center inner div


We would like to know how to center inner div.


<!DOCTYPE html>
<style type='text/css'>
.flex-container {<!--from w  ww  . j av  a2 s  . c om-->
  display: -webkit-flex;
  display: flex;
  width: 300px;
  height: 240px;
  background-color: Silver;

.flex-item {
  background-color: DeepSkyBlue;
  width: 100px;
  height: 100px;
  margin: auto;
  <div class="flex-container">
    <div class="flex-item">I'm centered!</div>

The code above is rendered as follows: