CSS - centering div horizontally and vertically not working (I read the existing posts but nothing works...)

Question

I have a div with an inline-block display so that it wrapps nicely its content. What I am trying to do is to center that div horizontally and vertically using the different technics I already used, the one I read on posts, but nothing working. Hope someone can help. Thank you in advance for your replies. Cheers. Marc..

http://jsfiddle.net/DfDLF/

my html:

<div>
  <input type='text'>
  <input type='text'>
  <input type="submit">
</div>

my css:

div{
display:inline-block;
padding:5px;
background:grey;
top:50%;
margin-left:auto;
margin-right:auto;}

http://stackoverflow.com/questions/114543/how-to-center-div-in-div — ZiTAL, Mar 17 '12 at 18:01
Hello ZITAL. Thanks for the link but the solution proposed is not working... — Marc, Mar 17 '12 at 18:08

score 3 · Accepted Answer · answered Mar 17 '12 at 18:13

div {

    height: 100px; /* specify width */
    width: 400px; /* specify height */

    position: absolute; /* position to absolute */

    top: 50%; /* push top 50% */
    left: 50%; /* push left 50% */

    margin-top: -50px; /* set margin top to minus half height */
    margin-left: -200px; /* set margin left to minus half width */

    /* your styles.. */
    padding: 5px;
    background: grey;
}

Set your CSS to this.

Boris D. Teoharov · Answer 2 · 2012-03-17T18:49:56.730

2

you cannot center Inline-Block using margin:auto because of its inline behaviour. So you can just use the following body{text-align:center;} and your div will center nicely

edited Mar 17 '12 at 18:49

answered Mar 17 '12 at 18:06

Boris D. Teoharov

2,319
4
30
49

score 1 · Answer 3 · answered Mar 17 '12 at 18:03

1

CSS

#vertical_align {
    height: 800px; /* need */
    width:100%;
    display: table;
    border:1px solid;
    #position: relative;
    overflow: hidden;
}
#vertical_align .container {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
#vertical_align .container .wrap {
    #position: relative;
    width: 100%;
    border:1px solid;
    #top: -50%;
}

HTML

<div id="vertical_align">
   <div class="container">
      <div class="wrap">
          <center>
              Your content
          </center>
      </div>
   </div>
</div>

answered Mar 17 '12 at 18:03

m1k1o

2,344
16
27

1

**Why are you using a no longer supported element?** – animuson Mar 17 '12 at 18:12
`vertical-align: middle` is really depreciated. – Mar 17 '12 at 18:13

score 0 · Answer 4 · answered Mar 17 '12 at 18:09

0

Here is one option: http://jsfiddle.net/DfDLF/24/

answered Mar 17 '12 at 18:09

Steve

340
4
16

CSS - centering div horizontally and vertically not working (I read the existing posts but nothing works...)

4 Answers4