There are many different ways to use CSS to achieve vertical centering of objects, and it is difficult to choose the correct method. Let me explain the good ways I see and how to create a good center site. Using CSS for vertical centering is not easy. Some methods are not valid in some browsers. Below we use CSS to achieve the vertical center of the object there are many different methods, it is difficult to choose the correct method. Let me explain the good ways I see and how to create a good center site.
Using CSS for vertical centering is not easy. Some methods are not valid in some browsers. Let's take a look at the 5 different ways to centralize objects vertically, and their pros and cons.
Method One
This method sets the display of some div as a table, so we can use the Vertical-align property of the table.
Copy CodeThe code is as follows:
<div id= "wrapper" >
<div id= "Cell" >
<div class= "Content" >
Content goes here</div>
</div>
</div>
Css:
#wrapper {display:table;}
#cell {Display:table-cell; vertical-align:middle;}
Advantages:
Content can dynamically change heights (not defined in CSS). Content is not truncated when there is not enough space in the wrapper
Disadvantages:
Internet Explorer (even IE8 beta) is not valid, many nested tags (actually not that bad, another topic)
Method Two:
This method uses an absolutely positioned DIV to set its top to 50%,top margin set to negative content height. This means that the object must specify a fixed height in the CSS.
Because there is a fixed height, you might want to assign a overflow:auto to the content so that if there is too much content, a scrollbar will appear to avoid content overflow.
<div class= "Content" > Content goes here</div>Css:
#content {
Position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* Negative half of the height */
}
Advantages:
Applies to all browsers
No nested tags required
Disadvantages:
When there is not enough space, the content disappears (similar to the div within the body, when the user shrinks the browser window, the scrollbar does not appear) Method Three
This method inserts a div outside of the content element. Set this div height:50%; Margin-bottom:-contentheight;.
The content clears the float and appears in the middle.
<div id= "Floater" >
<div id= "Content" >
Content here</div>
</div>
Copy CodeThe code is as follows:
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
Advantages:
Applies to all browsers
Content is not truncated when there is not enough space (for example: Window Zoom out), scroll bar appears
Disadvantages:
The only thing I can think of is the need for extra empty elements (and not so bad, another topic)
Method Four
This method uses a Position:absolute, with a fixed width and height of the div. This div is set to top:0; bottom:0;. But because it has a fixed height, in fact, it can not and up and down the spacing of 0, so margin:auto; will make it centered. Using Margin:auto to center the block-level elements vertically is straightforward. <div id= "Content" > Content here</div> CSS:
Copy CodeThe code is as follows:
#content {
Position:absolute;
top:0;
bottom:0;
left:0;
rightright:0;
Margin:auto;
height:240px;
width:70%;
}
Advantages: Simple
Disadvantages:
Invalid in IE (IE8 beta)
When there is not enough space, the content is truncated, but no scroll bars appear
method Five
This method can only be placed in a single line of text. Simply setting the line-height to the height value of that object allows the text to be centered. <div id= "Content" > Content here</div> CSS:
Copy CodeThe code is as follows:
#content {height:100px; line-height:100px;}
Advantages:
Applies to all browsers
Not be truncated when there is not enough space
Disadvantages:
Valid for Text only (block-level elements are not valid)
When there are many lines, the word break is worse.
This method is useful for small elements, such as centering the button text or a single line of text. Which way?
My favorite is the method of three, the shortcomings are not much. Because the content clears the float, you can place other elements on it, and when the window is scaled, the centered content does not cover the other elements.
<div id= "Top" >
</div>
<div id= "Content" > Content here</div>
Copy CodeThe code is as follows:
#floater {float:left; height:50%; margin-bottom:-120px;}
#top {float:rightright; width:100%; text-align:center;}
#content {clear:both; height:240px; position:relative;}
Now that you know what's going on, now we're starting to create a simple but interesting website. In the end it looks like this:
Step One
It's good to start with a semantic tag. Here's what our page consists of:
#floater/* Place content in */
#contred/*centre Box */
#side
#logo
#nav/* Unordered list */
#content
#bottom/* Place copyright etc. */
Here's the XHTML code I used:
Copy CodeThe code is as follows:
A centred Company
<div id= "centered" >
<div id= "Side" >
<div id= "logo" >
<strong><span>A</span> company</strong></div>
<ul id= "NAV" >
<li><a href= "#" >Home</a></li>
<li><a href= "#" >Products</a></li>
<li><a href= "#" >Blog</a></li>
<li><a href= "#" >Contact</a></li>
<li><a href= "#" >About</a></li>
</ul>
</div>
<div id= "Content" >
holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.
Energistically simplify impactful niche, via enabled imperatives.
Holisticly predominate premium innovation after compelling scenarios.
Seamlessly recaptiualize high standards in human capital with Leading-edge manufactured products.
Distinctively syndicate standards compliant schemas before robust vortals.
Uniquely recaptiualize leveraged web-readiness vis-a-vis Out-of-the-box information.
Efficiently embrace customized web-readiness rather than customer directed processes.
assertively grow cross-platform imperatives vis-a-vis proactive technologies.
Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.
Conveniently streamline competitive strategic theme areas with focused e-markets.
Phosfluorescently Syndicate world-class communities vis-a-vis value-added.
Appropriately reinvent holistic services before robust e-services.</div>
</div>
<div id= "Bottom" >
Copyright Notice goes here</div> Step Two:
Now we're going to use some basic CSS to add styles to the page. Put the following code into the style.css that was introduced at the top of our HTML page.
Copy CodeThe code is as follows:
HTML, Body {
margin:0; padding:0;
height:100%;
}
Body {
Background:url (' page_bg.jpg ') 50% 50% no-repeat #FC3;
Font-family:georgia, Times, serifs;
}
#floater {
position:relative; Float:left;
height:50%; margin-bottom:-200px;
width:1px;
}
#centered {
position:relative; Clear:left;
height:400px; width:80%; max-width:800px; min-width:400px;
margin:0 Auto;
Background: #fff;
BORDER:4PX solid #666;
}
#bottom {
Position:absolute;
bottombottom:0; rightright:0;
}
#nav {
Position:absolute; left:0; top:0; bottombottom:0; rightright:70%;
padding:20px; margin:10px;
}
#content {
Position:absolute; left:30%; rightright:0; top:0; bottombottom:0;
Overflow:auto; height:340px;
padding:20px; margin:10px;
}
Before we can center the content vertically, the body and HTML should be stretched to a height of 100%. Because height is within padding and margin, we have to set them to 0 to prevent the scroll bars from appearing because of very small margin.
Floater's margin-bottom is half of the content height (400px), -200px.
Now you can see the effect:
The width of the #centred is 80%. This can be the city Web page with the size of the display changes. Generally referred to as fluid layout. Set Min-width and max-width to avoid web pages being too large or too small. But IE does not support min/max-width. Obviously it can be replaced by a fixed width.
Because #centred is relatively positioned, in it we can use absolute positioning to locate the element. Set the Overflow:auto of the #content to prevent the scroll bar from appearing. IE does not like Overflow:auto; Unless we specify the height (not the position of top and bottom, nor%) we assign it a height.
Step Three
The last thing to do is to add a little more style to make the page look good. Let's start with the catalogue.
Copy CodeThe code is as follows:
#nav ul {
List-style:none;
padding:0; margin:20px 0 0 0; text-indent:0;
}
#nav Li {
padding:0; margin:3px;
}
#nav Li a {
Display:block;
padding:7px; margin:0;
Text-decoration:none; Color: #000;
border-bottom:1px solid #bbb;
Text-align:rightright;
}
#nav Li A::after {
Content: '» '; Color: #aaa; Font-weight:bold;
Display:inline; Float:rightright;
margin:0 2px 0 5px;
}
#nav li A:hover, #nav Li A:focus {
Background: #f8f8f8;
Border-bottom-color: #777;
}
#nav Li A:hover::after {
margin:0 0 0 7px; Color: #f93;
}
#nav Li A:active {
padding:8px 7px 6px 7px;
}
It is important to note the rounded corners of the #centred. CSS3, there should be a Border-radius property to set the radius of the fillet (refer to CSS3 Tour: Border-radius (fillet)-sugar companion tomato). Today's popular browsers are not supported, except with-moz (Molilla Firefox) or-webit (Safari/webkit) prefixes.
Compatibility considerations
As you can imagine, IE is the only troublesome browser.
- #floater must specify the width, otherwise in any version of IE, it does not do anything
- The directory in IE 6 is interrupted by too much space around
- IE 8 has extra space (author omitted)
More ideas.
you can do a lot of interesting things with the center page. I used this idea to redesign swfobject Generator 2.0 (using SWFObject2.0 to generate code). Here's another idea.
Information
Here are some of the information I refer to, recommended reading.
Understanding Vertical-align, or "how (not) to vertically Center Content"
Vertical centering using CSS
Vertical centering in CSS
sugar with tomato said : Horizontal center is often used, in fact, vertical center is also very useful. Usually use the most should be the method of five, is a small trick it.
Original : http://www.qianduan.net/?p=5654
5 ways to implement CSS vertical centering
