To implement DIV vertical Center CSS Code

The first CSS knowledge I learned was how to center a fixed width and height element horizontally or vertically. The centered content may be a picture in the inbound Welcome page (Splash page http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci213036,00.html), Or some design like the center of the design of the site. The most original solution is to position the element in the window from the left and the top edge to 50% absolute positioning. Of course, this just moves the top right corner of the element to the center of the window, and then you need to set the negative Margin-left and margin-top and make the value exactly the width and height of the element to the center of the screen.

Let's take a look at some examples of old-style practices and pay attention to the deficiencies: view Plaincopy to Clipboardprint?

2. html,body{
4. height:100%;
6. margin:0;
8. padding:0;
10. }
12. body{
14. Background: #eae7d7 URL (images/vert-centre.jpg) repeat-x Center Center;
16. Text-align:center;
18. min-width:626px;
20. min-height:400px;
22. }
24. #vert-hoz{
26. Position:absolute;
28. top:50%;
30. left:50%;
32. margin-top:-198px;/* Half Elements height*/
34. margin-left:-313px;/* Half Elements width*/
36. width:624px;
38. height:394px;
40. border:1px solid silver;
42. Background: #666;
44. overflow:auto;/* allow content to scroll inside element * *
46. Text-align:left;
48. }
50. h1 {color: #fff; margin:0;padding:0}

html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	background: #eae7d7 URL (images/vert-centre.jpg) repeat-x Center Center;
	Text-align:center;
	min-width:626px;
	min-height:400px;
}
#vert-hoz{
	Position:absolute;
	top:50%;
	left:50%;
	margin-top:-198px;/* half elements height*/
	margin-left:-313px;/* half elements width*/
	;
	height:394px;
	border:1px solid silver;
	Background: #666;
	overflow:auto;/* allow content to scroll inside element *
	/Text-align:left
;
} h1 {color: #fff; margin:0;padding:0}

View Plaincopy to Clipboardprint?

1. <div id= "Vert-hoz" >
3. </div>

<div id= "Vert-hoz" >
	
 
Here you can see the online demo, the effect of the following figure:

Figure 1
 
For the sake of the page I added some background colors to the elements, and here we are really interested in the gray centered section (also, you should notice that in order to center the background picture you should set the HTML and the body height to 100%).
As shown in Figure 1, this result is what we want, and the elements are perfectly centered in both horizontal and vertical directions. As already mentioned in the article, the absolute positioning of an element causes its top and left values to be 50%, and then uses a negative top-level fill and padding on the left-hand side to make the fill half as high and wide as the value.
Although it seems to be fine, there are several serious deficiencies with this approach, and you will find this problem by narrowing the window horizontally or vertically. When the window shrinks to less than the element, the element begins to slide out of the upper and left sides of the window. The part that slides out is not visible even if you are using a window scroll bar. This means that users with smaller screens simply cannot see the content.
Figure 2 shows the change in the single line of text in the example when the window shrinks.

Figure 2


Half of the text is lost and part of the left is missing. If we shrink the window further, the entire text disappears completely. To achieve our initial goal, try to add min-height and Min-width attributes to the body, but you will find that there is no effect at all and the elements will still slide out of the window.
 
The revised method
 
In the face of these problems, a similar centering technology can be used for us, it still uses the absolute positioning for the top, but for the horizontal center use is free float. This restricts the element from sliding from the left side of the window.
Here is the revised code:
View Plaincopy to Clipboardprint?

 
 
 
  

  
html,body{
 
  

  
height:100%;
 
  

  
margin:0;
 
  

  
padding:0;
 
  

  
}
 
  

  
body{
 
  

  
Background: #eae7d7 URL (images/vert-centre.jpg) repeat-x Center Center;
 
  

  
Text-align:center;
 
  

  
min-width:626px;
 
  

  
min-height:400px;
 
  

  
}
 
  

  
#vertical {
 
  

  
Position:absolute;
 
  

  
top:50%;
 
  

  
margin-top:-198px;/* Half main elements height*/
 
  

  
left:0;
 
  

  
width:100%;
 
  

  
}
 
  

  
#hoz {
 
  

  
width:624px;
 
  

  
Margin-left:auto;
 
  

  
Margin-right:auto;
 
  

  
height:394px;
 
  

  
border:1px solid silver;
 
  

  
Background: #666;
 
  

  
overflow:auto;/* allow content to scroll inside element * *
 
  

  
Text-align:left;
 
  

  
}
 
  

  
h1 {color: #fff; margin:0;padding:0}

 
html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	background: #eae7d7 URL (images/vert-centre.jpg) repeat-x Center Center;
	Text-align:center;
	min-width:626px;
	min-height:400px;
}
#vertical {
	position:absolute;
	top:50%;
	margin-top:-198px;/* half main elements height*/
	left:0;
	width:100%;
}
#hoz {
	width:624px;
	Margin-left:auto;
	Margin-right:auto;
	height:394px;
	border:1px solid silver;
	Background: #666;
	overflow:auto;/* allow content to scroll inside element *
	/Text-align:left
;
} h1 {color: #fff; margin:0;padding:0}
View Plaincopy to Clipboardprint?

 

 
  
 
   
<div id= "Vertical" >
 
   
<div id= "Hoz" >
 
   
 
   
</div>
 
   
</div>
 
  

 
<div id= "vertical" >
	<div id= "Hoz" >
		
 
You can view the online demo here.
The horizontal direction has already reached the effect we want, but the top will still disappear when the window height shrinks, as shown in Figure 3:

Figure 3
 
Correction:
 
In order to solve this problem (also the purpose of this article) I have used a few more complex methods, but now the method used is simpler and more robust, that is, using float (float) instead of absolute positioning.
The first element in the page that is set to the top 50% absolute positioning is floated. Then pull the float up, the size is half the height of the element.
The following are the necessary modifications:
View Plaincopy to Clipboardprint?

  

 
   
 
    
#vertical {
 
    
Float:left;
 
    
height:50%;
 
    
margin-top:-198px;/* Half Vertical height*/
 
    
width:100%;
 
    
}
 
   

  
#vertical {
	float:left;
	height:50%;
	margin-top:-198px;/* Half vertical height*/
	width:100%;
View Plaincopy to Clipboardprint?

  

 
   
 
    
<div id= "Vertical" ></div>
 
    
<div id= "Hoz" >
 
    
 
    
</div>
 
   

  
<div id= "vertical" ></div>
<div id= "Hoz" >
	
 
Here's an online demo you can look at yourself.

Figure 4
 
 
It's important that we set the width of the floating element to 100%, and remember that we need to set clear:both for the following elements because some browsers are having problems. If we don't use float, the element will still be centered but it will disappear from the top.
 
Why is this feasible?
 
There is actually an interesting behavior involved in floating, and it's better to understand its principles. Why does the content disappear from the top of the window when we use a static element (or an absolutely-positioned element in the first example) and we don't have this problem when we use float?
 
One feature of floating is that they break out of the text stream (although you can regain control by using clear for the following elements). The content behind the floating element is moved to leave the floating element space (usually through the browser to the static top fill to clear the float). If the floating element does not appear at all, the subsequent content occupies the position of the floating element originally on the page . Therefore, with a negative top padding (margin) for a floating element, the floating element breaks any block-level element restriction that contains it, as we have mentioned earlier that the floating element has been disconnected from the text stream at the outset. But if we drag an element away from the block-level element that contains it so far that it is completely beyond the parent element, then any elements behind it will not continue to move up, but the resizing of the inner content containing the block-level elements will keep the floating element floating.
 
This is what happens in our example, the floating element is moved up from the body, and the elements behind it are forced to remain in the block-level elements that the body forms. This may be a bit hard to understand directly, but we can take a look at the demo below.
View Plaincopy to Clipboardprint?

   

 
    
 
     
. float{
 
     
width:200px;
 
     
height:100px;
 
     
background:red;
 
     
Float:left;
 
     
}
 
     
. top{
 
     
Background:green;
 
     
height:300px;
 
     
width:100%;
 
     
}
 
     
. follow-on{
 
     
Clear:both;
 
     
Background:blue;
 
     
height:100px
 
     
}
 
    

   
. float{
	width:200px;
	height:100px;
	background:red;
	Float:left
}
. top{
	Background:green;
	height:300px;
	width:100%
}
. follow-on{
	Clear:both;
	Background:blue;
	height:100px
}
<div class= "Top" >Top</div>
<div class= "float" >Float</div>
<div class= " Follow-on ">following content</div>
 
The above code sets a static element at the top of the page, then a floating element, followed by other static content, which produces the effect shown in Figure 5, or can be seen on the online demo.

Figure 5
 
There is nothing special to notice, everything is like us.
 
If we add a negative 100px top margin to the floating element below, we get the result as shown in Figure 6:
View Plaincopy to Clipboardprint?

   

 
    
 
     
. float{
 
     
width:200px;
 
     
height:100px;
 
     
background:red;
 
     
Float:left;
 
     
margin-top:-100px
 
     
}
 
    

   
. float{
	width:200px;
	height:100px;
	background:red;
	Float:left;
	margin-top:-100px
}
 
Figure 6
 
 
Still the same as we expected, but what happens if we increase the negative 200px top padding?
View Plaincopy to Clipboardprint?

   

 
    
 
     
. float{
 
     
width:200px;
 
     
height:100px;
 
     
background:red;
 
     
Float:left;
 
     
margin-top:-200px
 
     
}
 
    

   
. float{
	width:200px;
	height:100px;
	background:red;
	Float:left;
	margin-top:-200px
}
 
Figure 7 shows the results:
 
Figure 7
 
As you can see, the floating element is removed from the subsequent content, but the content behind the floating element remains at the top of the element that contains it (such as under the green element). In our previous example, the same thing happened when we moved the floating element outward.

But if we remove the float from the Red Div, then the Red div and the content underneath it will be moved to the top of the green element.
 
Figure 8
 
The negative margins of the floating element change, and the subsequent content moves up accordingly.

I hope this little hint will interest you (even if you already know it), which means that for each one of us, there is something new to learn.