CSS Centering Trick: How to center a div or an image?

From time to time we create HTML/CSS templates where we need to center a div or an image. For some newbies it poses a problem. In this blog post I'll show you one of the ways of CSS centering.

Suppose you have a div or an image (with the size 150px X 100px) that should be centered on the web page. First step you do is the following CSS:

centered {
  position:  fixed;
  top:  50%;
  left:  50%;
}

Now we just need to to move the block up and left for a half of the block's size:

centered {
  position:  fixed;
  top:  50%;
  left:  50%;
  margin-top: -50px;
  margin-left: -75px;
}

And voila! Here is your block centered on a page using this nice CSS trick.

Have fun!