0

I have a div that needs to be centered horizontally inside another div. The problem is that the inner div is almost centered - i.e., it is centered but with a left margin/padding (I can't determine which) of about 5-10px. How can I make the inner div centered within the outer div?

HTML:

<div class="outer">
    <div class="inner">
        // stuff
    </div>
</div>

CSS:

.outer {
    position:relative;
    display:inline-block;
    width:100%;
}

.inner {
    position:relative;
    padding:10px;
    width:200px;
    height:200px;
}
Chris Paterson
  • 1,129
  • 5
  • 21
  • 31
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – snwflk Dec 19 '13 at 02:18

5 Answers5

1

you could do something like this:

#parent {
  display: table-cell;
  width: 300px;
  height: 300px;
  vertical-align: middle;
  text-align: center;
    border: 1px solid black;
}

#child {
    display: inline-block;
    width:100px;
    height: 100px;
    border: 1px solid black;
}

here's a fiddle: http://jsfiddle.net/De36Y/

Jeff
  • 1,800
  • 8
  • 30
  • 54
0

I would try to make the inner div have a position: absolute, then set margin equally like the following:

CSS:

.outer {
    position:relative;
    display:inline-block;
    width:100%;
}

.inner {
    position: absolute;
    margin-left: auto;
    margin-right: auto
    width:200px;
    height:200px;
}
vishnu
  • 730
  • 2
  • 6
  • 26
0

On .inner use:

width: 50%; margin: 0 auto;

mumush
  • 650
  • 6
  • 14
0

You could do this

.outer {
    position:relative;
    display:inline-block;
    width:100%;
    text-align: center;
}

.inner {
    position:relative;
    display: inline-block;
    padding:10px;
    width:200px;
    height:200px;
}
CRABOLO
  • 8,605
  • 39
  • 41
  • 68
0

How about this code?

.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
/* included */
left:50%;
margin-left:-100px;}