Web & graphic design notes

CSS: A layer in the center of the screen

Sometimes very useful to place a div layer in the center of the screen. There is a simple way to do this, using css. But the shortage of this method is that we need to use width and margin prpoerties to the div-layer.

Here is the sample code:

.center_layer {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 200px;
   height: 100px;
   margin-left: -100px;
   margin-top: -50px;
}

where:
margin-left - the negative left margin, equal to half the width of the layer;
margin-top - the negative top margin, equal to half the height of the layer.

Another way to write a code:

body {
   text-align: center;
}
 
div#centerlayer  {
   margin-left: auto;
   margin-right: auto;
   width: 50em;
   text-align:left;
}