How To Center an Object Exactly In The Center

BY CHRIS COYIER ON NOVEMBER 14, 2007

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
}

In order to get the image exactly centered:

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

If you don't know, or are thinking it might change and want to be future proof, try this:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

code type:

Search form