Cách căn giữa ngang một <div> trong <div> khác

Giới thiệu

Ở đây tôi có một form HTML và một file CSS (style.css). "o-div" là div ngoài và "i-div" là div trong class.

Ví dụ HTML

<html > 
  <head> 
    <title>center a div</title> 
    <link href="../../Content/style.css" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <div class="o-div"> 
      I am OUTER DIV 
      <div class="i-div"> 
        I am INNER DIV, 
        I am in Center 
      </div> 
    </div> 
  </body> 
</html>

Kết quả

I am OUTER DIV I am INNER DIV, I am in Center

Style.css

body { 
  background-color:Gray; 
  padding:30px; 
} 
.o-div { 
  padding:50px; 
  background-color:Lime; 
} 
.i-div { 
  background-color:Fuchsia; 
  max-width:400px; 
  height:200px; 
  margin: 0 auto; 
  text-align:center; 
}