Centered Content with CSS

**Monty1** · 08-01-2011

One of the typical problems is to focus horizontally and vertically using CSS HTML content. This is why it is not easy to get vertically position an item. This trick I read somewhere but unfortunately I do not remember where so I apologize to the original author of this method.

Centering with CSS

The basic idea is to use absolute positioning content first place in the middle of the screen, then we assign negative top and left margin in amounts equivalent to half the size of the content we want to focus. Then if we have an image of 300x236 pixels in size would have the CSS of the form:

Code:

# Main { 
width: 350px; 
height: 245px; 
position: absolute; 
top: 30%; 
left: 30%; 
margin-top:-122px; / * 50% of the high * / 
margin-left:-175px; / * 50% of the width * /

Then include the image in a div called main, join the code and get the full form for centering.

HTML Code:

<html> 
<head> 
<title> Center with CSS </ title> 
<Style type = "text / css"> 
<Style type = "text / css"> 
# Main { 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top:-122px; 
margin-left:-175px; 
width: 350px; 
height: 245px; 
} 
</ Style> 
</ Head> 
<body> 
<Div id = "main"> 
<Img src = "image.png" width = "350" height = "245"> 
</ Div> 
</ Body> 
</ Html>

**Monty1** · 08-01-2011

Centering with CSS with SWFs

We use the same technique of centering, for that if you use SWFObject, we would have the following code to insert a swf with dimensions of 255x140 pixels.

HTML Code:

<html> 
<head> 
<title> Center with CSS </ title> 
<Script src = "swfobject.js" type = "text / javascript"> </ script> 
<Style type = "text / css"> 
# Main { 
width: 255px; 
height: 140px; 
position: absolute; 
top: 30%; 
left: 30%; 
margin-top:-55px; 
margin-left:-135px; 
} 
</ Style> 
</ Head> 
<body> 
<Div id = "main"> </ div> 
<Script type = "text / javascript"> 
var so = new SWFObject ("7762.swf", "id", "255", "140", "9", "# FFF"); 
so.write ("main"); 
</ Script> 
</ Body> 
</ Html>

You see very simple and is compatible with most browsers. So you can use any browser, according to your choice.

**Monty1** · 08-01-2011

Now I would like to discuss about the Oversized Content: overflow. Specifies how an area or element that is defined within another element is to be displayed when the contents of the inner element is too large. For example, if within a div area is defined, and this area is larger than the dimensions of <DIV> range or positioning of the edge passes through.

Code:

<style type="text/css">
  .Trialdiv
  {
   background-color: # fefefe;
   border-style: solid 1px # 000000;
  }
 # Divid
 {
  position: absolute;
  left: 400px; top: 300px; width: 350px; height: 175px;
  overflow: scroll;
 }
 </ Style>

 <body>

   <div id="divid" class="trialdiv">
   ...
   </ Div>

The applicability of overflow was in the draft of CSS 2.1 on table cells (none of the currently supported browser) and expanded inline-block.