CODEWITHSUNDEEP
htmlcss
Morgan Cheng
Morgan Cheng

Reputation: 75998

How to put a div at center of another div?

I'd like to have one div at center of another div horizontally.

    <div id="container">
        <div id="centered">
            hello world;
        </div>
    </div

I tried with below style with "margin: 0px auto" trick, but it only works in FF, not in IE.

    div
    {
        border-width: 2px;
        border-style: solid;
    }
    #centered
    {
        margin: 0 auto;
        width: 30px;
    }
    #container
    {
        width: 100px;
        }

Is there any way to achieve this cross browser?

Upvotes: 3

Views: 13790

Answers (6)

sanecin
sanecin

Reputation: 35

... here div class="content" on center of div position:relative ... 

<style>

 .wrapper {
     width:200px;/* this is size range */
      height:100px;  
 position:absolute;
 left:50%;top:50%;
 visibility:hidden;
}

.content {
 position:relative;
 width: 100%;height:100%;
 left:-50%;top:-50%;
 visibility:visible;
}

</style>

<div style="position:relative;width:500px;height:400px;background:#ff00ff;">

  <div class="wrapper">
   <div class="content">

   ... so you has div  on center ...

   </div>
  </div>

</div>

Upvotes: 0

Paolo Bergantino
Paolo Bergantino

Reputation: 488374

You probably are not including a DOCTYPE in your document, thus throwing IE into quirks mode.

Add this at the top of your file, for example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

See the difference here: with doctype, without doctype.

It is a very good practice to always include a DOCTYPE into your document to make your website be as consistent as possible across browsers. With a DOCTYPE and a reset stylesheet cross browser layouts are much more reliable.

The above DOCTYPE is just one of many choices. For more, check out this stackoverflow question

You may also notice that Stackoverflow's sister site aimed at designers is named after this very important aspect of web design: Doctype.

Upvotes: 11

cletus
cletus

Reputation: 625017

See Quirks mode and strict mode and Activating Browser Modes with Doctype. Basically it's good practice to force browsers (particularly IE) to be more standards-compliant by always using a DOCTYPE at the top of the document, like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

With that all browsers will horizontally center with margin: 0 auto.

Edit: this question originally said "vertical centering, hence the answer below:

From Vertical Centering in CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

Basically, it's complicated involving relative+absolute+relative positioning (whereas its trivial with a table cell contents).

Upvotes: 5

Anthony
Anthony

Reputation: 37045

This works for me, but it's fairly fragile, so use pixels or ems, not percentages:

<style type="text/css">

#div1 {
    height: 20em;
    width: 30em;
    border: 1px dashed #000;
    text-align:center;
}

#div2 {
    height: 5em;
    width: 5em;
    border: 1px solid #000;
    margin: auto;
    margin-top: 25%;
    margin-bottom: -25%;
    line-height: 5em;
}
</style>

<div id="div1">
    <div id="div2">Woot!</div>
</div>

I just set the top margin to 25% and the bottom to -25%. Seems to work pretty well.

Upvotes: 0

lod3n
lod3n

Reputation: 2903

IE is a PITA. You can do it with tables deprecated markup (cringe).

<table width="100%" height="100%"><tr><td align="center" valign="middle">
CONTENT
</td></tr></td>

I'm sure you can pull it off with CSS hacks too.

Upvotes: 1

trydyingtolive
trydyingtolive

Reputation: 327

Add text-align:center; to container. Side note: the text in the centered div will be centered also.

Upvotes: 1

Related Questions