Centering a div in the page

Question

How do I center a div at the middle of my page in html using CSS?

Something like www.google.com, when you go to the site, you will see the search bar and the logo are centered in the middle of the page.

Any way to go around this?

Can u just make a fiddle link b'coz couldn't get your question. — Benjamin, Aug 07 '14 at 08:33
you could just look at the code of www.google.com and see how they do it — andrei, Aug 07 '14 at 08:34
probably try using jquery check this link http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen?rq=1 — Benjamin, Aug 07 '14 at 08:39
Check this jsfiddle http://jsfiddle.net/sbirthare/fy5xkf3q/. Add more content if you want. — SBirthare, Aug 07 '14 at 08:42
Check out this http://stackoverflow.com/questions/10925852/vertically-horizontally-align-inner-div-center-of-the-page?rq=1 — Benjamin, Aug 07 '14 at 08:47

score 0 · Answer 1 · answered Aug 07 '14 at 08:43

MARKUP

<div class="outer"><div class="inner">your content</div></div>

STYLE

.outer {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}

DEMO

score 0 · Answer 2 · edited Aug 07 '14 at 09:54

0

center the div using margin : auto.

Html:

<div id="center"></div>

And css:

#center {
    margin : auto;
    display : inline-block;
}

edited Aug 07 '14 at 09:54

julienc

19,087
17
82
82

answered Aug 07 '14 at 09:08

Rahiil

110
1
11

score 0 · Answer 3 · answered Aug 07 '14 at 09:11

0

<div class = "center_me">Some content</div>

corresponding CSS to center the div would be,

.center_me {
 dislay: table;
 margin: 0px auto;
 }

or,

.center_me {
 display: table;
 width: 50%;
}

answered Aug 07 '14 at 09:11

Thomas Sebastian

1,582
5
18
38

score -1 · Answer 4 · answered Aug 07 '14 at 08:39

-1

Try this;

Html:

<div id="element">your element</div>

css

#element {
  width: 200px;
  display: block;
  margin: 0 auto;
}

answered Aug 07 '14 at 08:39

eman.lodovice

192
1
6

Centering a div in the page

4 Answers4