Thursday, July 10, 2014

CSS: How to center elements in a DIV or any container

Centering elements horizontally is pretty simple.

Just apply the following style rules to the element you want to center horizontally.


display: block;
margin: 0 auto;
 

I also came across this article on absolute centering. The technique very nicely align your element in the center of a container vertically and horizontally using these simple CSS style rules.

.Center-Container {
  position: relative;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
} 

More interesting techniques are shown on that article so be sure to check it out.