There are three ways to vertically center the text: one is to use flex layout, set display: flex and align-items: center for the container; the second is to use line-height for a single line of text, and the setting value is consistent with the container height; the third is to add transform to absolute positioning, set top and left to 50% and translate (-50%, -50%); in addition, it is necessary to note that the container must have clear height, adaptation issues of multi-line text and adjustments under responsive design.

Keeping text vertically centered in the container is a common problem when laying out web pages. Many people think this should be very simple at first, but it is sometimes a bit confusing to implement it with CSS. In fact, there are many methods, the key is to look at the specific scenario and choose the right method.

Using flex is the easiest and most commonly used

Flexbox is one of the most recommended ways at present, especially when you have already used flex to make the overall layout. Just add display: flex to the container and cooperate with align-items: center .

 .container {
  display: flex;
  align-items: center;
  height: 100px;
}

The advantage of this method is that it doesn’t matter what the height of the text is, nor does it need to calculate margin or padding. As long as the container has a clear height, it can basically be centered.

Note: If your container itself does not have a height set, vertical centering of flex may not take effect. Because the browser does not know what height to use as a reference.

Use line-height to control single-line text

If it is just a single line of text, such as a button or title, you can consider using line-height . This method is old school but practical, especially suitable for elements with fixed heights.

 .container {
  height: 50px;
  line-height: 50px;
}

After this setting, the text will be vertically centered in the container. However, it should be noted that it only applies to single-line text . If there are multiple lines of text, the effect will be less than ideal and may appear to be out of alignment.

Accurate control with absolute positioning transform

If you need to be compatible with old browsers, or use them in relatively complex layouts, you can use absolute positioning to add transform .

 .container {
  position: relative;
}

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

This method can not only center text, but also center block-level elements, pictures, etc. However, it is more suitable for situations that are separated from document flow, such as pop-up windows and floating prompts.

Pay attention to some small details that are easy to ignore

• The container must have a clear height, otherwise many methods will fail;
• If there is too much text content, consider whether the line break and container width are appropriate;
• In responsive design, font sizes or container sizes may need to be adjusted for different screen sizes;
• If you are using grid layout, you can also use a flex-like method to center it.

Basically these are the methods. Each type has applicable scenarios, and it is not difficult to use if you choose the right one. The key is to understand the principles behind them, not rote code.

The above is the detailed content of Techniques for vertical centering text within a container using css. For more information, please follow other related articles on the PHP Chinese website!