HTML Element Style How to - Center inner div

Question

We would like to know how to center inner div.

Answer


<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">I'm centered!</div>
  </div>
</body>
</html>

The code above is rendered as follows: