Five methods for implementing CSS vertical center web page layout

There are many different methods to use CSS to implement vertical center of objects. It is difficult to choose the correct method. I will explain the good methods I have seen and how to create a good Center website.

It is not easy to use CSS to implement vertical center. Some methods are invalid in Some browsers. Next, let's take a look at five different methods for vertical object concentration, as well as their respective advantages and disadvantages. (See the test page for a brief explanation .)

Method 1

Discussion: http://www.missyuan.com/viewthread.php? Tid = 377041

This method sets the display method of some divs to table, so we can use the vertical-align property attribute of the table.

<Div id = "wrapper">
<Div id = "cell">
<Div class = "content">
Content goes here </div>
</Div>
</Div>

# Wrapper {display: table ;}
# Cell {display: table-cell; vertical-align: middle ;}

Advantages:

Content can dynamically change the height (not defined in CSS ). Content is not truncated when wrapper does not have enough space

Disadvantages:

Internet Explorer (or even IE8 beta) is invalid, and many nested labels (not so bad, another topic)

Method 2:

This method uses an absolutely positioned div and sets its top to 50%, and top margin to a negative content height. This means that the object must specify a fixed height in CSS.

Because there is a fixed height, you may want to specify overflow: auto for content, so that if there is too much content, a scroll bar will appear to avoid content overflow.

<Div class = "content">
Content goes here </div>

# Content {
Position: absolute;
Top: 50%;
Height: 240px;
Margin-top:-120px;/* negative half of the height */
}

Advantages:

Applicable to all browsers
No need for nested tags

Disadvantages:

When there is not enough space, the content will disappear (similar to the case where the div is in the body, when the user narrowing down the browser window, the scroll bar will not appear)

Method 3

This method inserts a div outside the content element. Set the div height: 50%; margin-bottom:-contentheight ;.
Content is cleared and displayed in the middle.

<Div id = "floater">
<Div id = "content">
Content here </div>
</Div>

# Floater {float: left; height: 50%; margin-bottom:-120px ;}
# Content {clear: both; height: 240px; position: relative ;}

Advantages:

Applicable to all browsers
Content is not truncated when there is not enough space (for example, window narrowing), and the scroll bar appears

Disadvantages:

The only thing I can think of is the need for additional null elements (not that bad, but another topic)

Method 4

This method uses a position: absolute, div with fixed width and height. This div is set to top: 0;
Bottom: 0 ;. However, because it has a fixed height, it cannot be separated from the upper and lower distances to 0, so margin: auto; will center it. Use
Margin: auto; it is very easy to vertically center block-level elements.

<Div id = "content">
Content here </div>

# Content {
Position: absolute;
Top: 0;
Bottom: 0;
Left: 0;
Right: 0;
Margin: auto;
Height: 240px;
Width: 70%;
}

Advantages: Simple

Disadvantages:

IE (IE8 beta) is invalid
When there is not enough space, the content is truncated, but no scroll bar appears.

Method 5

This method can only include a single line of text. You only need to set line-height to the height value of the object to center the text.

<Div id = "content">
Content here </div>

# Content {height: 100px; line-height: 100px ;}

Advantages:

Applicable to all browsers
Not truncated when there is not enough space

Disadvantages:

Valid only for text (Block-level elements are invalid)
When multiple rows are running, the broken words are worse.

This method is very useful for small elements, such as centering button text or single line text.

Which method?

I like method 3 most, but there are not many disadvantages. Because the content will clear the floating, you can place other elements on it, and when the window is scaled,
The center content does not cover other elements. Let's look at the example.

<Div id = "top">
<H1> Title </Div>
<Div id = "content">
Content Here </div>

# Floater {float: left; height: 50%; margin-bottom:-120px ;}
# Top {float: right; width: 100%; text-align: center ;}
# Content {clear: both; height: 240px; position: relative ;}

Now you know what is going on. Now we start to create a simple but interesting website. The final result is as follows:

Step 1

It is good to start with semantic tags. Below is the structure of our page:

# Floater/* set content to medium */
# Contred/* center box */
# Side
# Logo
# Nav/* unordered list */
# Content
# Bottom/* copyright placement */

Here is the xhtml code I used:

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">
<H1> Page Title Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.
Energistically simplify impactful niche markets 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.
<H2> Heading 2 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 markets.
Appropriately reinvent holistic services before robust e-services. </div>
</Div>
<Div id = "bottom">
Copyright notice goes here </div>

Step 2:

Now we start to use some basic CSS to add styles to the page. Put the following code into the style.css introduced at the top of our html page.

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;
Bottom: 0; right: 0;
}

# Nav {
Position: absolute; left: 0; top: 0; BOT: 0; right: 70%;
Padding: 20px; margin: 10px;
}

# Content {
Position: absolute; left: 30%; right: 0; top: 0; bottom: 0;
Overflow: auto; height: 340px;
Padding: 20px; margin: 10px;
}

Before we can vertically center content, the body and html should be stretched to a height of 100%. Since the height is within padding and margin, we need to set them to 0 to prevent the scroll bar from appearing because of a small margin.

Floater's margin-bottom is half of the content height (PX),-PX.

Now we can see the effect:

# Centred is 80% in width. This allows the city page to change with the display size. It is generally called Fluid layout. Set min-width and max-width to prevent the webpage from being too large or too small. However, IE does not support min/max-width. Obviously, it can be replaced by a fixed width.

Because # centred is relatively positioned, in which we can use absolute positioning to locate elements. Set # content
Overflow: auto; to avoid the appearance of the scroll bar. IE doesn't like overflow very much: auto; unless we specify the height (not top or bottom)
So we can specify the height for it.

Step 3

The last thing to do is add some more styles to make the page look better. Start with the directory.

# Nav ul {
List-style: none;
Padding: 0; margin: 20px 0 0 0; text-indent: 0;
}

# Nav li {
Padding: 0; margin: 3px;
}

# Nav li {
Display: block; background-color: # e8e8e8;
Padding: 7px; margin: 0;
Text-decoration: none; color: #000;
Border-bottom: 1px solid # bbb;
Text-align: right;
}

# Nav li a: after {
Content: '»'; color: # aaa; font-weight: bold;
Display: inline; float: right;
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;
}

Note that the # centred rounded corner is used. In CSS3, you should have the border-radius attribute to set the radius of the rounded corner (refer to CSS3:
Border-radius (rounded corner)-sugar with tomato ). Currently, popular browsers are not supported, unless you use-moz (Molilla Firefox) or
-Webit (Safari/Webkit) prefix.

Compatibility considerations

As you may think, IE is the only troublesome browser.

• # Floater must specify the width. Otherwise, it will do nothing in any version of IE.
• In IE 6, the directory is interrupted by too much space.
• IE 8 has extra space (omitted by the author)

More ideas

Using centered web pages can do a lot of interesting things. I used this idea to redesign SWFObject Generator 2.0 (using SWFObject2.0 to generate code. Here is another idea.

Materials

The following are some of my reference materials. We recommend that you read them.

Understanding vertical-align, or "How (Not) To Vertically Center Content"
Vertical centering using CSS
Vertical Centering in CSS

Sugar with tomatoes:

Horizontal center is often used. In fact, vertical center is also very useful. Method 5 is the most commonly used. It's a little trick.

(Responsible editor: great treasures)