The simplest way to horizontally and vertically center a DIV

I have gone trough a lot of ways to horizontally and vertically center a DIV. Many of the code snippets had a Child DIV1 inside a Parent DIV2 to center the Child. They work perfect but I found a simpler way to center a single DIV trough CSS.

I am not sure if this is already known to all, but I experimented and came up with this simple CSS snippet.

Here is a visual representation of how this works:

vertically center a div

Here is the CSS Snippet to be assigned to the DIV to be centered. The size of the DIV is 100 x 100 px ( same as the above example ).

/* CSS Document */

.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;

Here is another example with size 500 x 200 px.

/* CSS Document */

.centered_div {
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
background: red;

You can also find an online example here

Link selector Specificity

While it’s always possible that you have a stupid browser– that’s not really for me to say– it is more often the case that the styles have simply been written in the wrong order. To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.

The core of the situation is this: every selector has a specificity. If two selectors apply to the same element, the one with higher specificity wins. Thus:

 P.hithere {color: green;}    /* specificity = 1,1 */
 P {color: red;}              /* specificity = 1   */

So any paragraph which has a class of hithere will be green, not red. Both selectors apply, and both try to set the color, so the more-specific selector wins out.

Aside: this only comes into play when the same property is involved. Thus:

   P.hithere {color: green;}    /* specificity = 1,1 */
   P {font-family: Courier;}    /* specificity = 1   */

All paragraphs will be in Courier, but those with a class of hithere will be in Courier and green in color.

Okay, so how do pseudo-classes affect specificity? They all have equal weight, as it turns out. So the following styles all have the same specificity:

 A:link {color: blue;}        /* specificity = 1,1 */
 A:active {color: red;}       /* specificity = 1,1 */
 A:hover {color: magenta;}    /* specificity = 1,1 */
 A:visited {color: purple;}   /* specificity = 1,1 */

All of them can apply to a hyperlink, and in some cases, more than one will apply. For example, an unvisited link can be hovered and active at the same time as it’s an unvisited link. Since three of the above rules apply to the hyperlink, and the selectors all have the same specificity, then the last one listed wins. Therefore, the “active” style will never appear, because it will always be overridden by the “hover” style. Now consider a hyperlink which has been visited. It will always and forever be purple, because its “visited” style beats out any other state, including “active” and “hover.”

This is why the recommended order in CSS1 goes like this:


The first two can be in either order, actually, because a link can’t be both visited and unvisited at the same time. (:link means “unvisited”; and no, I don’t know why they didn’t call it that.)

This is also why CSS2 now allows the chaining of pseudo-classes. For example, you could write:

   A:visited:hover {color: maroon;} /* specificity = 2,1 */
   A:link:hover {color: magenta;}   /* specificity = 2,1 */
   A:hover:active {color: cyan;}    /* specificity = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don’t conflict. You can get hover-active combinations, for example.

Finally, a word about how I represented specificity in this article. The specification simply concatenates numbers together, so that the first example in the post would have been written like this:

   P.hithere {color: green;}    /* specificity = 11 */
   P {color: red;}              /* specificity = 1  */

This implies a base-ten arithmetic. However, specificity calculations do NOT use base ten, a fact at which the specification hints but doesn’t come right out and say in big bold letters. If you chain fifteen simple selectors together, they still have a lower specificity than a simple class selector. Here’s how the specification would represent this:

   .hello {color: red;}    /* specificity = 10 */
   /* specificity = 15 */

That “10” is actually a 1 followed by a zero, not “ten.” We could try representing the previous rules specificities in hexadecimal, like this:

   .hello {color: red;}    /* specificity = 10 */
   /* specificity = F */

The only problem there is that if you try to add two more selectors to the second rule, then you get a specificity of 11, and once again we get confused. In fact, the counting base for specificity is effectively infinite, and so these kinds of comparison start to break down. So I’m switching over to comma-delimited specificity calculations in the future just to avoid more confusion.