center alignment of div inside a div both vertically as well as horizontally

Question

I have two divs one inside another. I have given some border to both the divs and I want both the divs to be in the center with respect to the page both horizontally and vertically. I have seen the solutions to similar question but couldn't solve my problem. Please also share good resources from where I can learn about the positioning i.e relative absolute in depth.

Below is my HTML code:

<!DOCTYPE html>
<style type="text/css">
    .outer {
        color:black;
        width: 400px;
        height:400px;
        border: 100px solid;
        border-radius:100%;
        border-color: red blue green yellow;
        position: static;
        margin: auto  auto auto auto;
        top:50%;
    }
    .inner{
        color:black;
        width: 100px;
        height:100px;
        border: 50px solid;
        border-radius:100%;
        border-color: red transparent green transparent;
        position: relative;
        top:50%;
        margin: -50px auto auto auto;
    }
</style>
<html>
    <body>
        <div class="outer">
            <div class="inner">
            </div>
        </div>
    </body>
</html>

this one is a good resource http://code.google.com/edu/submissions/html-css-javascript/ — Bob, Jun 26 '12 at 13:47
duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Moin Zaman, Jun 26 '12 at 13:47

score 1 · Accepted Answer · answered Jun 26 '12 at 13:52

IF you know the sizes of both boxes, and they won't change, you can use this:

.outer {
  color:black;
  width: 400px;
  height:400px;
  border: 10px solid;
  border-color: red blue green yellow;
  position: absolute;
  margin: -200px  auto auto -200px;
  top:50%;
  left: 50%;
}
.inner{
  color:black;
  width: 100px;
  height:100px;
  border: 5px solid;
  border-color: red transparent green transparent;
  position: absolute;
  top:50%;
  left: 50%;
  margin: -50px auto auto -50px;
}

Note I took out the border radius and narrowed the border size to make the point clearer.

Basically, you can use absolute positioning with relative units (%), but use a fixed negative margin that is half the size of the box.

See the JS Fiddle

it seems to work but why does the alignment deteriorates as soon as i try to change side of the border ??? — manyu, Jun 26 '12 at 14:06
Because the border contributes to the perceived width of the box. If you have a 100px width, and a 20px border, the perceived width is 140px. You would need to back the margin off by -70 in that case. Make sense? — chipcullen, Jun 26 '12 at 14:08

score 1 · Answer 2 · answered Jun 26 '12 at 13:53

Horizontal centering most of the time is not much of a problem. Adding a margin: 0 auto style to a div will mostly do what you want.

Vertical centering however seems to be a bit more complex. A list of 6 options for vertical centering is given here: http://www.vanseodesign.com/css/vertical-centering/

Also note the Additional Resources section in that article, which lists some good references as well.

score 0 · Answer 3 · answered Jun 26 '12 at 14:02

0

The actual height & width of your div is 200px including borders. So in your inner you will set the left & top margin to actual size/2 :

.inner{
  ...
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;


}

answered Jun 26 '12 at 14:02

Bob

1,489
1
16
28

Narppavi · Answer 4 · 2014-03-17T10:26:47.693

A smart way to align a div to center of the page is to use display:table and display:table-cell method.

HTML:

<div class="wrapper"> 
<div class="box"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis pretium arcu, eget semper lacus. Aliquam aliquam, augue non bibendum pretium, felis neque eleifend tortor, ut luctus mi ante vel nisl. Mauris id enim elit.
</p> 
</div> 
</div>

CSS:

html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;}

.wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}

.box {
background-color: red;
display: inline-block;
text-align: center;
padding:10px;
width: 100px;
height:auto;
}

See the live demo:

http://jsfiddle.net/Narppavi/ej6yL/

center alignment of div inside a div both vertically as well as horizontally

4 Answers4