CSS four methods for vertical centering

This article for you to organize four kinds of CSS to achieve vertical center effect, the idea is very good, with reference value, need to refer to the friend

Row height Line-height for vertical centering of single-line text

It used to be that single-line text is centered vertically to set the height and row heights to the same value, but the height is not necessarily set. In fact, the text itself is centered on one line. When the height is not set, the height of the row is high.

<style>.test{    line-height:50px;    Background-color:lightblue;}    </style><p class= "Test" > Testing text </p>

Setting Vertical-align:middle for vertical centering

"1" Sets the display of the parent element to Table-cell

By setting the Vertical-align:middle for the Table-cell element, the child elements are vertically centered. This is similar to the vertical center of the cell in the table.

[note] To ie7-browser support, you can change it to the <table> table structure

[note] p that is set to Table-cell cannot use floating or absolute positioning, because floating or absolute positioning causes the element to have block-level element attributes, thereby losing the ability to vertically align the table-cell element.

If a floating or absolute positioning process is required, a layer of p is required outside.

<style>.parent{  Display:table-cell;  Vertical-align:middle;} </style><p class= "Parent" style= "background-color:gray;height:100px;" >    <p class= "Child" style= "Background-color:lightblue;" > I was a little long a little long a little long test text </p>   </p>

"2" If the child element is a picture, by setting the row height of the parent element instead of the height, and setting the parent element's font-size to 0.

Vertical-align:middle's explanation is that the middle of the element is aligned with the parent element's baseline plus the height of the letter x in the parent element 1/2. Because the character x is not vertically centered in the EM box, the character x of each font is not in the same high and low position.

Therefore, when the font size is large, this difference is more obvious. When Font-size is 0 o'clock, it is equivalent to setting the font size of character x to 0 so that it can be completely vertically centered.

<style>.parent{  line-height:100px;  font-size:0;}. child{  Vertical-align:middle;} </style><p class= "Parent" style= "background-color:lightgray;width:200px;" >    </p>

"3" with new elements for vertical centering effect

The new element sets the height to the parent height, the width is 0, and the Inline-block element is also set vertically centered vertical-align:middle. Because the whitespace between the two elements is resolved, you need to set font-size:0 at the parent, set the font-size to the desired value in the child, and if the structure is not strict, you can display two elements one line, then you do not need to set font-size:0.

<style>.parent{  height:100px;  font-size:0;}. child{  Display:inline-block;  font-size:20px;  Vertical-align:middle;}. childsbling{  Display:inline-block;  height:100%;  Vertical-align:middle;} </style><p class= "Parent" style= "Background-color:lightgray; width:200px; " >  <p class= "Child" style= "Background-color:lightblue;" > I am longer long multiline text </p>  <i class= "childsbling" ></i> </p>

Idea three: Vertical centering via absolute positioning

"1" If the child element is indeterminate, use top50% with Translatey (-50%) to achieve the center effect.

The percentage of the translate function is relative to its own height, so the top:50% mate Translatey (-50%) can achieve a center effect.

Note ie9-browser is not supported;

[note] If the height of the child element is known, the translate () function can also be replaced by the Margin-top: negative height value.

<style>.parent{  position:relative;}. child{  Position:absolute;  top:50%;  Transform:translatey (-50%);} </style><p class= "Parent" style= "Background-color:lightgray; height:100px; " >  <p class= "Child" style= "Background-color:lightblue;" > Test Text </p></p>

"2" If the sub-element height, combined with the absolute positioning of the box model properties, to achieve the center effect

<style>.parent{  position:relative;}. child{position:absolute; top:0; bottom:0; Margin:auto 0; height:50px;} </style><p class= "Parent" style= "Background-color:lightgray; height:100px; " >  <p class= "Child" style= "Background-color:lightblue;" > Test Text </p></p>

< notes on adding P-level >

In the horizontal center alignment, the element outer layer p and set absolute, the element set negative margin-left or relative negative left property, can achieve the effect of horizontal center. However, since margin is relative to the width of the block, it is not feasible for the margin-top:-50% to get the width rather than the height of-50%, and for the percentage value of relative, in cases where the block height is auto, chrome, Both Safari and ie8+ browsers do not support setting the percentage top value of the element, so it is not possible.

Idea Four: Use elastic box model flex for vertical centering

Note ie9-Browser does not support

"1" Set the side axis alignment on the telescopic container Align-items:center

<style>.parent{  Display:flex;  Align-items:center;} </style><p class= "Parent" style= "Background-color:gray; height:100px; " >    <p class= "Child" style= "Background-color:lightblue;" > Test text </p>   </p>

"2" set Margin:auto on the scaling project 0

<style>.parent{Display:flex;}. child{Margin:auto 0;} </style><p class= "Parent" style= "Background-color:gray; height:100px; " > <p class= "Child" style= "Background-color:lightblue;" > Test text </p> </p>