ADVERTISEMENT
ADVERTISEMENT

CSS - Make Inner DIV center inside Outer DIV

In this style, we will learn how to make an Inner DIV center inside Outer DIV. Generally an Inner Div can’t be center inside Outer Div but using few parameters we can make it center.

Make Inner DIV Center inside Outer DIV

CSS:

<style>
    .outerDiv {
        background-color: #006699;
        color: #fff;
        height: 200px;
        width: 200px;
        margin: 0px auto;
    }
    .innerDiv {
        background-color: #efefef;
        color: #000;
        height: 150px;
        width: 150px;
        margin: 0px auto;
    }
</style>

HTML Source Code with CSS:

<!--CSS - Make Inner DIV center inside Outer DIV.-->
<html>
    <head>
        <title>CSS - Make Inner DIV center inside Outer DIV.</title>
        <!--Example CSS-->
        <link href="ExampleStyle.css" type="text/css" rel="stylesheet" />
        <style>
            .outerDiv {
                background-color: #006699;
                color: #fff;
                height: 200px;
                width: 200px;
                margin: 0px auto;
            }
            .innerDiv {
                background-color: #efefef;
                color: #000;
                height: 150px;
                width: 150px;
                margin: 0px auto;
            }
        </style>
    </head>
    <body style="text-align: center;">
        <h1>CSS - Make Inner DIV center inside Outer DIV.</h1>
        <div class="outerDiv">
            This is Outer DIV.
            <div class="innerDiv">
                This is Innder DIV.
            </div>
        </div>
    </body>
</html>

Result:

make inner div center

CSS Tutorial & Examples »


ADVERTISEMENT




ADVERTISEMENT



Comments and Discussions!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.