Using XHTML + CSS to vertically center elements has always been a complicated and tricky issue in front-end development. As a web designer or front-end development engineer, this vertical center problem is also one of the skills that must be mastered, and some internet companies will also have such questions. Today, we will share a perfect method for implementing vertical center through CSS. This method was invented by AKA yuh pipeline. This method is also the most perfect and concise method for implementing CSS vertical center. Next let's take a look at the summary notes. If you have different opinions, please take a look at them:
Vertical center condition of the CSS:
1. a container with a defined height already exists (for example, <div>)
2. There is an object with an unknown height (it may be the text dynamically generated in the background and placed in another <div>)
3. I want to vertically Center internal objects in the container.
4. Do not use HTML tables (Table Elements) or JavaScript.
The CSS vertical center method:
The biggest problem:IE browser bug.
Most browsers can understand the form declaration in CSS, such as display: Table. However, IE7 and earlier ie versions cannot understand the declaration.
Solution: Let the majority of browsers that understand the display: Table declaration use the vertical-align attribute to vertically center, so that IE7 and earlier versions can solve the center problem with their own high-Understanding bugs.
Ie bug:
IE7 and earlier versions understand the height BUG: If container a contains object B, container A does not set the height value. If the object B has actual content (such as text ), the height of A is considered equal to that of B. If B is relatively positioned, B will move relative to the original position in a (mainly using the percentage height ).
Eg: A has no defined height, and B has a height of 50% PX. Locate B and Set Top :-
In this case, the standard browser does not move B because it does not know the height of. In IE7 and earlier versions, the height of B relative to a (actually equal to the height of B) is increased by 50%, that is, 50px.
How can I only let IE7 and earlier versions understand their declarations?
1. Pixy once invented underscore hack, which is to add an underscore (_) before each CSS attribute. This hack is specifically for IE6 and earlier versions, which means IE7 cannot understand. For example: _ Position: absolute; so this kind of hack will pass!
2. the "#" statement before the attribute can only be understood by IE7 and earlier versions, but cannot be understood by any other browser "#", therefore, the "#" statement will be ignored by other browsers. OK ~~ That's it!
Compatibility:
So far, it is compatible with all Internet Explorer, Gecko core browsers (Mozilla, Firefox, Netscape 7), opera 7, and WebKit core browsers (Safari and Google Chrome) in ie8.x ).
CSS SectionCode:
# Outer {
Display: Table;
Height: 400px;
# Position: relative;
Overflow: hidden;
}
# Middle {
Display: Table-cell;
Vertical-align: middle;
# Position: absolute;
# Top: 50%;
}
# Inner {
# Position: relative;
# Top:-50%;
}
Part of XHTML code:
<Div id = "outer">
<Div id = "Middle">
<Div id = "inner">
<! -Here is the content to be vertically centered->
</Div>
</Div>
</Div>
Complete code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> CSS vertical center-test page </title>
<Style>
P, div {
Font-size: 12px;
}
# Outer {
Height: 400px;
Display: Table;
Background-color: # e7f0fe;
Overflow: hidden;
# Position: relative;
Padding: 5px;
}
# Middle {
Display: Table-cell;
Vertical-align: middle;
# Position: absolute;
# Top: 50%;
}
# Inner {
# Position: relative;
# Top:-50%;
Padding: 3px;
}
. Border {border: 1px solid # badffe ;}
A: link {
Text-Decoration: none;
Color: # effeccf5;
}
A: visited {
Text-Decoration: none;
Color: #666666;
}
A: hover {
Color: # ff3300;
Text-Decoration: underline;
}
</Style>
</Head>
<Body>
<H1 style = "font-family:; color: #313131"> CSS perfectly achieves vertical center-test page <P style = "color: red;"> tested browsers: ie5.0, ie5.5, ie6.0, ie7.0, ie8.0, Firefox, opera7, and safari... </P>
<Div id = "outer" class = "border">
<Div id = "Middle">
<Div id = "inner" class = "border">
Website availability Research <br>
User Experience analysis <br>
Webpage Design <br>
Web standards <br>
Div + CSS </div>
</Div>
</Div>
<P> (in the demoSource codeSome CSS declarations are attached to the modifier. You can ignore them)
This method is also suitable for vertical center of images. We recommend that you define the width of the outer layer when using this method.
</P>
</Body>
</Html>
From:
Http://www.im85.cn/article/XHtml/129.htm
Http://www.adobe-dreamweaver.cn/News/265.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
