Css center layers & elements

[arpan911]

CSS Center Elements

There is a way to center elements by browser size using CSS only. In order to achieve this effect, let us being by taking a look at the position attribute and understanding what each attribute value pertinent to positioning means and how it can be best deployed in a to center a layer across browser sizes. In the following examples we are going to be working with a CSS Layer, however it is important to recognize that this technique can be used on any element that is absolutely positioned.

Position: Absolute

The position: absolute attribute signifies to the browser that this element will be positioned independently of other elements that are used in the page. Consider the following code snippet.


<div id="Layer1" style="position:absolute; width:346px; height:64px; z-index:1; left: 200px; top: 150px; background-color: #666666" class="maintext">
This is an absolutely positioned &lt;div&gt; element, that is 200px from left and 150px from top
</div>


In the above code snippet, we are interested in three attributes; the position, left and top attributes. These three attributes tell the browser to place the <div> element 200px from the left of the viewing area and 150px from the top of the browser viewing area, regardless of the page flow or the screen size of the browser

If you resize the browser screen to be less than 200px wide and hit the refresh button then no matter what you do the element remains at 200px from left and 150px from top. If the viewing area of the browser is less than 200px wide and 150px in height then the element goes off screen. It is important to understand that your positioning point starts from the top left corner of an element.

If we changed the code so that the element is placed 50% from the top of the browser and 50% from the browsers left edge we still find some problems. The placement of the element is dependent upon the browser size and consequently won't appear to be centered in most browser sizes, simply because the positioning of the element begins at the top left corner of the element.

We can overcome this limitation by shifting the top left corner of the element to some other co-ordinate. How? By using margin attributes.

If you recall, the top and left corner of the element begins exactly at the top left corner. By setting margins for the element, the top and left coordinates are shifted to accommodate the margin settings. Consequently the browser interprets the element top and left corner as beginning wherever we specify the margin attributes to be and will display content from that starting point. Armed with this knowledge, we can then go about creating an element that will always center by using a little math.

To obtain the new left edge value, divide the width attribute value by two; 364px / 2 = 173. Conceptually what we are about to do is subtract the value 173 from the width. We do this by setting a CSS definition for the element consisting of margin-left: -173px;.

We do the same for the new top edge value and end with margin-top: -32px for that element. The following is the CSS relevant for the margin settings of Layer1;

#Layer1 {

margin-left: -173px;

margin-top: -32px

}

The inline styles would look like this;


<div id="Layer1" style="position:absolute; width:346px; height:64px; z-index:1; left: 50%; top: 50%; background-color: #666666" class="maintext">
This is an absolutely positioned &lt;div&gt; element, that is 200px from left and 150px from top
</div>