Mainfram Reality


Center absolutely positioned DIV using CSS

I’ve seen people write javascript in order to centre an absolutely positioned div. All that is needed is the following
snippet of CSS.

  1. .notice
  2. {
  3.   position: absolute;
  4.   width: 400px;
  5.   top: 0px;
  6.   left: 50%;
  7.   margin-left: -200px;
  8. }

Basically, left: 50% means the div is centered, but from the top left corner of the div, to fix this margin-left should be half the width and negative.

The same technique can be applied to show absolutely positioned div footer that is always visible, just set top: 100% and margin-top to be the same as the height of the element.

No comments