CSS for a fixed height and unknown height text Vertical Center Perfect solution

In the work we often encounter similar to "fixed height text vertical center and unknown Height vertical center problem", or "Picture vertical center Problem", and we most likely to think of using a table vertically centered, or if it is a single line of text, use height (height) and line-height (row height) to solve, but if the page has multiple lines of text, fixed height how to solve? or unknown height, how do we solve this with CSS? and compatible with the various viewers!

One: single-line text is centered vertically:

If there is only one line of text in a container, it is simple to directly define height (height) and line-height (row height) as a vertical center.

such as: <div style= "Height:25px;line-height:25px;overflow:hidden" >aa</div>

Two: multi-line text fixed height vertical center:

1. In addition to IE7 and IE7 the following browser multi-line text fixed height vertical center solution.

We all know that we can achieve vertical centering of the text in the form of a table, so that we can use CSS to simulate the way the table is vertically centered Vertical-align property will only work on the (X) HTML tags that have valign attributes, such as TD, But it doesn't work for tags like span, and if we don't consider IE7 and the following, we can use display:table and Display:table-cell to simulate the vertical center of the table. The former must be set on the parent element, which must be set on the child element. For example, the following HTML code: <div class= "wrapper" >

<div class= "Content" >content age</div>

</div>

The CSS code corresponding to the copy code is as follows:. wrapper{

height:400px;

display:table;

}

. content{

Vertical-align:middle;

Display:table-cell;

border:1pxsolid#ff0099;

Background-color: #FFCCFF;

width:760px;

}

Copy the code can be implemented in addition to IE7 and IE7 below the browser support text Vertical center problem!

2. Compatible with ie6+ Firefox Google Explorer's multi-line text Vertical Center solution!

In fact, the solution in the standard browser as above, now the question of how we solve IE7 and the following version of the problem, we can consider the location of the way to solve the parent element in the IE6 after positioning, if the child element is calculated as a percentage, The basis of the calculation seems to be inherited (if the value of the position is an absolute value without this problem, but the basis for using a percentage calculation will no longer be the height of the element, but the positioning height inherited from the parent element).

For example, the HTML code is as follows: <div class= "Wrap" >

<div class= "Subwrap" >

<div class= "Content" >aaaaa</div>

</div>

</div>

Copy the code we can absolutely position the top:50% on the parent element, and then position the top:-50% on the child element so that it can overlap exactly. The CSS code is as follows:. wrap{

border:1pxsolid#ff0099;

Background-color: #FFCCFF;

width:760px;

height:400px;

position:relative;

}

. subwrap{

Position:absolute;

border:1px solid #000;

top:50%;

}

. content{

border:1pxsolid#000;

position:relative;

top:-50%;

}

Copy the code so for the above solution, we can slightly optimize under the standard browser we use a table-like approach to solve, but for a version like IE7 and below we can use absolute positioning method to solve. So optimize the following CSS code as follows:. wrap{

display:table;

border:1pxsolid#ff0099;

Background-color: #FFCCFF;

width:760px;

height:400px;

*position:relative;

Overflow:hidden;

}

. subwrap{

Vertical-align:middle;

Display:table-cell;

*position:absolute;

*top:50%;

}

. content{

*position:relative;

*top:-50%;

}

Copy code three: Multiple lines of text unknown height vertically centered solution:

In fact, the idea is the same as in the standard browser version of a table-like approach to the vertical center solution, for IE7 6 to use the positioning of the way to solve. The following code

Html:<div class= "wrapper" >

<div class= "Subwrap" >

<div class= "Content" >

About the unknown height of CSS horizontal vertical centering problem <br/>

</div>

</div>

</div>

Copy code css:body {padding:0;margin:0;}

. content{border:1px solid red;width:500px;margin:0 auto;font-size:12px;line-height:1.8;}

/* Standard browser version */

html,body{height:100%;}

. wrapper{text-align:center;width:100%;height:100%;d isplay:table;}

. Subwrap{display:table-cell;vertical-align:middle;}

/*ie6*/

*html. Wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}

*html. Subwrap{position:relative;top:-50%;text-align:center;}

/*ie7 can be merged but not merged in order to better illustrate */

*+html. Wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}

*+html. Subwrap{position:relative;top:-50%;text-align:center;}

CSS for a fixed height and unknown height text Vertical Center Perfect solution