CSS implements vertical center of Div content

1. center a single line of content
It is easiest to consider a single row. No matter whether or not the container is given a fixed height, you only need to set the line-height and height for the container and make the two values equal, plus over-flow: hidden:
. Middle-demo-1 {
Height: 4em;
Line-Height: 4em;
Overflow: hidden;
}

Advantages:
1. Both block-level and inline polar elements are supported.
2. Support for all browsers
Disadvantages:
1. Only one row can be displayed
2. the center of is not supported in IE6.
Note that:
1. Use relative height to define your height and line-height
2. If you don't want to destroy your layout, overflow: hidden must

 If you wantAlign the text horizontally, and add "text-align: center ;".;CodeAs follows:

Note: If the parent-level element defines text-align: center, this means that the content in the parent-level element is centered. for IE, this setting is enough. However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;". However, if all docdocype adopts the XHTML transitional mode, you can use the latter.

2. Multi-line content is centered and the container height is variable
It is also very simple,Provide consistent padding-bottom and padding-top.

. Middle-demo-2 {
Padding-top: 24px;
Padding-bottom: 24px;
}

Advantages:
1. Both block-level and inline polar elements are supported.
2. Supports non-text content
3. Support for all browsers
Disadvantages:
Container cannot be fixed height

3. How to vertically center an image in a div
background method .

the key is the final center. This parameter defines the image position. It can also be written as "top left" (upper left corner) or "bottom right", or "50 30 ".