একটি <div> কে অন্য <div>-এর ভিতরে হরাইজন্টালি সেন্টার করা

এখানে আমার একটি HTML ফর্ম এবং একটি CSS ফাইল (style.css) আছে। "o-div" হলো আউটার div এবং "i-div" হলো ইন্ডার div ক্লাস।

উদাহরণ

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