CSS text is centered vertically

Original Demo

Html

  <Divclass= "box">    <Divclass= "text">I am a single-line Test text</Div>  </Div>  <Divclass= "box">    <Divclass= "text">I am multiline text I am multiline text is multiline text I am multiline text I am multiline text I am multiline text I am multiline text I am multiline text I am multiline text I am multi-line text I am > multiline word</Div>  </Div>

Css

  . box{border:1px solid #f00; Background-color: #eee; width:500px; height:100px;}  . text{}

：

One, vertical center of single-line text

Solution: Line-height Method

Css

   . Box{ border:1px solid #f00; background-color:#eee; width :500px; height:100px; line-height:100px;}

Note: You can see that this method will make one-line text centered, and multiline text because it is set with the container and other large line-height, resulting in text overflow. Therefore, this method is only suitable for the center of single-line text.

Two, the vertical center of multiline text

Solution: Vertical-align Method

Css

  . Box{ border:1px solid #f00; background-color:#eee; width :500px; height:100px; Vertical-align:middle;display:table-cell;}   . Text{}

：

Note: You can see that this method can make single-line text, multiline text is centered. However, because Table-cell is an inline type, it causes the original block-level element to move to the same row for each div line. If you need to split two rows, you need to add additional containers outside to control the location.

Related reading:

The horizontal vertical center of a picture with no fixed size and multiline text

Some problems of line-height, Vertical-align and Display:inline-block

CSS text is centered vertically