CSS for vertical centering of text

First, the problem description

When the height is fixed or not fixed, the single line or multiline text is difficult to achieve vertical centering;

Ii. Causes of production

1, the height is not fixed, the CSS itself does not provide the corresponding API support (specifically to provide incomplete);

2, browser does not support;

Third, the solution:

1, using the Line-height property, the Line-height setting and the height of the element.

Advantages: simple and clear;

Cons: Only applicable to single-line text, large limitations

Code:

. center-text-trick {height:100px;line-height:100px;

White-space:nowrap;}

Method Two

padding: Setting an equal value for the upper and lower padding

Disadvantage: cannot be vertically centered when there is a height limit.

Code:

. link{padding-top:30px;padding-bottom:30px;}

<div class= "link" >padding-top:30px;padding-bottom:30px;</div>

Method Three

Absolute Positioning Center:Top:0;bottom:0;left:0;right:0;margin:auto;

when the element is over -constrained, the margin is set to auto, and the browser calculates the value of the margin, which is too restrictive to set both Top/bottom and height or left/right and width.

Pros: Support responsive, only this method is still vertically centered after resize

Disadvantage: Using absolute positioning requires that the element must be set to an explicit height, without explicitly setting overflow, when the content exceeds the element height, it overflows, and there is no scroll bar.

IE Browser does not support

Code:

. absolute_center{/*display:none;*/position:absolute;width:200px;height:200px;top:0;bottom:0;left:0;right:0; Margin:auto;background: #518fca; The resize:both;/* is used to set all the elements except overflow as visible */overflow:auto; }

Method Four

Fixed height Positioning Center:top:50%;height:100px;margin-top: -50px;

Advantages: Low code volume, high browser compatibility, support ie6,ie7

Cons: no response supported (Cannot use percentages, min/max-width), and is highly fixed.

Code:

. parent {position:relative;}

. Child {position:absolute;top:50%;height:100px;margin-top: -50px;/*transform:translatey (-50%); */}

Method Five

Centering: Top:50%;left:50%;transform:translate (-50%,-50%) without fixed height positioning

Cons: no response supported (Cannot use percentages, min/max-width)

Code:

. parent {position:relative;}

. Child{position:absolute;top:50%;left:50%;transform:translate (-50%,-50%);}

Method Six

Table-cell Mode Center: dispaly:table;display:table-cell;vertical-align:middle;

The Display:table-cell attribute means that the label element is rendered as a table cell, similar to a TD label.

principle: Using the table layout feature,after Vertical-align is set to middle, the middle of the contents of the cell is aligned with the middle of the row.

Pros: Support for variable heights of any content, responsive layouts

Cons: each element that needs to be vertically centered will need to be tagged with additional tags (requires table, Table-cell two extra elements);

IE Browser does not support

Code:

. wrapper{height:200px; display:table;}

. Content{vertical-align:middle;display:table-cell;/*cell Vertical Center, if the outer div is not table then TableCell must have a high degree */border:1px Solid #FF0099; width:760px;}

<div class= "wrapper" >

<span class= "Content" > Indefinite height text </span></div>

Method Seven

Elastic box-type layout center: display:flex;justify-content:center;

Use the elastic box layout to align the spindle and side axes of the child elements to the center

Pros: True Vertical Center Layout

Cons:ie11 only starts to support flex layouts

Code:

<div class= "Container is-flexbox" ><div class= "center" > both down-to-earth in real life, but also occasionally out of reality to the ideal high platform to look at. <br> in the spiritual world to set up a full set of systems, leading us to not lost and not slack. </div></div>

. Is-flexbox{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;- Webkit-align-items:center;

Align-items:center;-webkit-justify-content:center;justify-content:center;}

Summarize

1, only a single line of text, you can set the Line-height and the height of the element is high

2, the outer div and the inner div height are fixed, you can use the set equal up and down padding value;

3, when the height is fixed, you can use fixed height positioning center: top:50%;height:100px;margin-top: -50px; This method is good for IE browser support;

4, when the height is not fixed, you can use the Elastic Box Layout Center: Display:flex;justify-content:center; This method is simple to operate, but IE11 only starts to support flexible layouts ; Table-cell Mode Center: dispaly:table;display:table-cell;vertical-align:middle; This method supports variable heights of arbitrary content, but it is cumbersome to operate and IE8 above browser is supported;

CSS for vertical centering of text