Member Avatar for tqmd1

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]

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

Please help

  • 3 Contributors
  • 2 Replies
  • 227 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Quick diagnostic and context: ’s snippet contains a couple of small typos and invalid HTML that will break any centering approach (for example the body margin has a misspelling and the page uses </br> instead of a valid <br>). ’s table/table-cell idea can work if the parent is set to display: table, and is right that fixed top/left math is brittle. For a robust, responsive result, prefer a modern centering method or a simple absolute+transform fallback.

Flexbox (recommended, responsive — works when the parent has a known height or min-height):

#main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;            /* or min-height */
  width: 400px;
  margin: 20px auto;
  background: lightgreen;
}

#box {
  width: 200px;
  padding: 10px;
  background: #FFA500;
  text-align: center;
}

Absolute + transform (works when the child size is unknown, good fallback for older engines):

#main { position: relative; height: 400px; width: 400px; margin: 20px auto; background: lightgreen; }

#box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  padding: 10px;
  background: #FFA500;
}

Troubleshooting notes: ensure the parent actually has height (vertical centering needs that), remove or check overflow that might clip content, use box-sizing: border-box to avoid padding/width surprises, and correct HTML typos so CSS runs as expected. Flexbox gives the easiest, most maintainable centering for dynamic content; the transform technique is simple and widely compatible.

Recommended Answers

All 2 Replies

Member Avatar for DaveAmour

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>`
Member Avatar for gentlemedia

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.

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.