วิธีจัด div ให้อยู่กึ่งกลางแนวนอนภายใน div อีกตัวหนึ่ง

ที่นี่มี HTML form หนึ่งและไฟล์ CSS หนึ่ง (style.css) "o-div" คือ outer div และ "i-div" คือ inner div class

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>

ผลลัพธ์

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; 
}