Placing div in the center of the page

Question

i am starting to learn css. I have this html and css. I am not able to center this image to center of the window. Please explain also how you got this output.

Edited : I want it to be center both vertically and horizonally

Thank you.

.myClass {
  background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
  height:250px;
  width:250px;
  
}

<div class="myClass">
  </div>

possible duplicate of [How to center a (background) image within a div?](http://stackoverflow.com/questions/5040232/how-to-center-a-background-image-within-a-div) — Rob, Jan 03 '15 at 16:48
Your image is inside a div but the duplication about a div is also a duplicate. Search for it. — Rob, Jan 03 '15 at 16:50
@David007 you have to accept answer bellow you have to click on tick on left side check my answer and click run code snippet — sanoj lawrence, Jan 03 '15 at 16:52
@Rob I too think that this question is a duplicate. **But its certainly not a duplicate of the question in your link.** — The Pragmatick, Jan 03 '15 at 16:55
I think it's actually funny, this question is on the forum so many times, yet so many ppl provide not working answers... — Pinki, Jan 03 '15 at 17:04
This kind of questions have flooded the whole css category on Stack Overflow — The Pragmatick, Jan 03 '15 at 17:05
possible 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) — JasonMArcher, Jan 03 '15 at 17:35

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

Here are solutions for centering div!
StackOverflow Answer

This is my preferred solution.

HTML:

<div class="container"><div class="container__inner"></div></div>

CSS:

.container{
  position:relative;
}
.container__inner{
  width: 250px;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Note that this solution only works if the container has a fixed height!
Read more about this here
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

edited May 23 '17 at 12:06

Community

1
1

answered Jan 03 '15 at 17:02

FrontDev

837
5
19

This is actually a nice way to do it, i use it all the time +1 – Jacob G Jan 03 '15 at 17:08
this is the best way to center block +1 – Arp Jan 03 '15 at 17:34

score 0 · Answer 2 · answered Jan 03 '15 at 16:48

0

You need to add margin to your class.

.myClass {
    background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-      1.gif);
    height:250px;
    width:250px;
    margin:0 auto;
    }

This will add margin on each side of the element.

answered Jan 03 '15 at 16:48

AvoQ

97
1
7

@Pinki you shouldn't downvote an answer to a question that was not specific. OP added in the edit about vertical and horizontal alignment after these answers were posted. It was not clear that he/she wanted both – jmore009 Jan 03 '15 at 18:50

score -1 · Answer 3 · answered Jan 03 '15 at 16:46

-1

add margin: auto

.myClass {
  background-image:url(http://www.funklix.in/wp-content/uploads/2014/07/Clip-art-free-1.gif);
  height:250px;
  width:250px;
  margin: auto;
}

answered Jan 03 '15 at 16:46

jmore009

12,863
1
19
34

Placing div in the center of the page

3 Answers3