Sir I am using these codes

<html>
<head>
<title>Center dive</title>

<style type="text/css">

html body{
margin:0 atuo;
margin-top:20px;
}

#main {
    margin: 0 auto;
    background-color: lightgreen;
    overflow: auto;
    text-align:center;
    height:400px;
    width:400px;
    color:blue;
}
#box {
    display:table-cell;
    vertical-align: middle height: 200px;
    width: 200px;
    background-color:#FFA500;
    border:1px solid silver;
    color:blue;
    font-weight:bolder;
    font-size:24px;
    padding:10px;
    margin:0 auto;
}
</style>

</head>
<body>
<div id="main">
    <div id="box">This box </br>must be 

Centered</br>Horizontaly</br>and</br>Vertically</br> in </br>Main Div</div>
</div>

</body>
</html>

[IMG]http://i57.tinypic.com/2yvktck.png[/IMG]

How to Display box in the center of main div? (Horizontaly and Vertically)

Please help

Recommended Answers

Since you have all width and height values, it's easy to do some little math and position #box with some top and left margins in the middle of #main. No need for display: table, display: table-cell and vertical-align: middle

#main {
    margin: 0 auto;
    background-color: lightgreen;
    overflow: auto;
    height:400px;
    width:400px; …
Jump to Post

All 2 Replies

Is this any help?

` <style type="text/css">
html body
{
margin: 0 atuo;
margin-top: 20px;
}

    #main
    {
        margin: 0 auto;
        background-color: lightgreen;
        overflow: auto;
        text-align: center;
        height: 300px;
        width: 300px;
        color: blue;
        display: table;
        padding: 40px;
    }

    #box
    {
        display: table-cell;
        vertical-align: middle;
        height: 200px;
        border: 1px solid #000;
        width: 200px;
        background-color: #FFA500;
        border: 1px solid silver;
        color: blue;
        font-weight: bolder;
        font-size: 24px;
        padding: 30px;
        margin: 0 auto;
    }
</style>`

Since you have all width and height values, it's easy to do some little math and position #box with some top and left margins in the middle of #main. No need for display: table, display: table-cell and vertical-align: middle

#main {
    margin: 0 auto;
    background-color: lightgreen;
    overflow: auto;
    height:400px;
    width:400px;
}

#box {
    height: 200px;
    width: 200px;
    background-color:#FFA500;
    margin: 100px auto 0;
}

See demo : http://cssdeck.com/labs/4w13hzhx

But setting all this fixed heights makes everything pretty inflexible, therefore the content in #box needs to fit perfectly and can't extend unless you change the height and the margins in your CSS of #main and #box. Too much maintanance.