Use CSS to perfectly align vertically

Document directory

• Vertical center condition of the CSS:
• The CSS vertical center method:
• Compatibility:
• Code:

Using XHTML + CSS to vertically center elements has always been a complicated and tricky problem in front-end development. As a web designer or front-end development engineer, this vertical center problem
It is also one of the skills that must be mastered. Some Internet companies will also have such questions in their interview questions. Today, storm Binbin will share a perfect method for vertical center through CSS, which is composed of AKA
Invented by yuh Hei, this method is also the most perfect and concise CSS vertical center implementation method by storm Binbin. Next, let's take a look at the notes that storm Binbin once summarized. If you have different opinions, please take a look at them:

Let's take a look at the demo of the Instance effect.

 

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 understand the display: the browser declared by table uses 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 later versions understand high bugs:
If container a contains object B, container A does not set the height value. If object B has actual content (such as text), the height of object A is considered equal to that of object B. If B is relatively positioned, B will move relative to the original position in a (mainly usingPercentage
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 invented underscore hack
In each CSS
Add an underscore (_) before the attribute. This hack is specifically for IE6 and earlier versions, which means IE7 cannot be understood. For example: _ position: absolute; so this kind of hack will PASS!

2. the statement "#" added 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 ).

Code:

CSS section:

# 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%;
}

XHTML section:

<Div id = "outer">
<Div id = "Middle">
<Div id = "inner">
<! -Here is the content to be vertically centered->

</Div>
</Div>
</Div>

Preview Demo
(Added some CSS for modification in the Demo source code.
Statement, which can be ignored)

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.

Blog Source: http://blog.bingo929.com/css-vertical-center.html