What are the methods to vertically center div text? Introduction to the method of vertically centering div text

Vertical centering is a very common centering method in front-end layout. The following article will introduce to you the implementation method of vertical centering of div text. Friends in need can refer to it.

First of all, we should know that horizontal centering of text is relatively simple. Row-level elements set the text-align center of their parent elements, and block-level elements set their own left and right margins to auto. But vertical centering of div text is not that simple, so let’s take a closer look at several implementation methods of vertical centering of div text.

1. The vertical-align attribute allows the text to be centered.

There are many vertical-align values. The commonly used ones are middle, bottom, text-bottom, etc. However, the actual use Sometimes, we will find that this attribute "sometimes works but sometimes does not work". In some cases, after we add this attribute, we still don't see any changes in the img or text. That's because vertical-align only works within elements such as inline-block or inline, as well as table-cell.

Example:

<div style="vertical-align: middle;display: table-cell;">
    <img src="02.jpg" alt="">
    <p>文本居中</p></div>

2. Use line-height to center the text vertically

If you want to vertically center only one or a few lines text, then it is the simplest to make, just make the line height of the text the same as the height of the container.

Example:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

3. Use padding to center the text vertically

Use padding Centering text vertically is similar to using line height to center text vertically. It is also suitable for vertically centering one or several lines of text.

Example:

p { padding:20px 0; }

4. Use CSS3 transform to vertically center text

Example:

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

5. Use flex layout to achieve vertical centering of text

Example:

.flex{    /*flex 布局*/
    display: flex;    /*实现垂直居中*/
    align-items: center;    /*实现水平居中*/
    justify-content: center;
    
    text-align: justify;
    width:200px;
    height:200px;
    background: #000;
    margin:0 auto;
    color:#fff;
}

This article ends here. I would like to learn more about the various functions used in the above code. For attributes, please refer to the css User Manual and css3 Learning Manual of the PHP Chinese website! ! !

The above is the detailed content of What are the methods to vertically center div text? Introduction to the method of vertically centering div text. For more information, please follow other related articles on the PHP Chinese website!