<tutorialjinni.com/>

Horizontally Center a Div within a Div

Posted Under: CSS3, HTML5, Tutorials on Dec 20, 2016
To center a div horizontally in a div you need just one property of CSS i.e. margin. To center it you need to give width to the outer or parent div and for inner or child div to need to set CSS margin: 0 auto;

Below is full code for it. 
<!DOCTYPE html>
<html>
    <head>
        <title>Horizontally Center a Div within a Div</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #outerDiv{
                width: 100%;
                background-color: #b9c3ff;
                height: 200px;
            }
            #innerDiv{
                margin: 0 auto;
                width: 50%;
                background-color: #ebfbd8;
                text-align: center;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="outerDiv">
            <div id="innerDiv">I am the inner div centered within a parent div</div>
        </div>
    </body>
</html>
it will be redered to somthing like the image below Horizontally Center a Div within a Div This is tested in latest versions of Chrome, Firefox, Internet Explorer and Microsoft Edge.


imgae