CSS vertically centered 5 ways

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. Let's take a look at the 5 different ways to centralize objects vertically, and their pros and cons. (You can look at the test page for a short explanation.) )

Method One

This method sets the display of some div as a table, so we can use the Vertical-align property of the table.

Content goes here

#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.

Content goes here

#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.

Content here

#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.

Content here

#content {position:absolute;top:0;bottom:0;left:0;right: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.

Content here

#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. See example.

Title

Content here

#floater {float:left; height:50%; margin-bottom:-120px;} #top {float:right; 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 the content in the */#contred/*centre box */#side #logo#nav/* unordered list */#content #bottom/* Place the copyright, etc. */

Here's the XHTML code I used:

A centred Company

A Company

• Home
• Products
• Blog
• Contact
• About

Page Title

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.

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. Appropriately reinvent holistic services before robust e-services.

Copyright Notice goes here

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.

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; bottom:0; right:70%;p adding: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 center the content vertically, the body and HTML should be stretched to a height of 100%. Because height
Within padding and margin, so we're going 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 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 avoid the appearance of the scroll bar. IE does not like Overflow:auto; Unless we specify the height (not the position of top and bottom, nor%)
So 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.

#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; Background-color: #e8e8e8;p adding: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;}

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 with tomato). Now the
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.

CSS vertically centered 5 ways