This article will introduce a variety of CSS horizontal and vertical centering methods that were once tricky but are now easy to implement. We will cover horizontal and vertical centering using Flexbox and positioning plus transformations. In another article, we will also cover how to use CSS Grid for horizontal and vertical centering.

Summary of key points

• Use Flexbox vertically centered text and icons: Convert containers to Flex containers and use justify-content and align-items to centered child elements.
• Combination of position and transform can achieve vertical centering, especially for highly variable elements. This is done by creating a positioning context and adjusting the position of the element relative to its container.
The
• line-height attribute can be used to vertically center a single line of text or icons within a fixed height container, while the vertical-align can be used to center inline elements.

How to use Flexbox for horizontal and vertical centering

Flexbox can align elements horizontally and vertically, thereby centering text, icons, or any other element in CSS.

To use the Flexbox centering element, you can use the following code snippet:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

This code snippet converts .container to a Flex container, automatically converting its child elements to a Flex project. You can then use justify-content to center these Flex items horizontally and use align-items to center vertically.

View example: CodePen link

Continue reading to learn about the vertical positioning and positioning techniques of the box model.

How to use position and transform to achieve flexible vertical centering

When you cannot use Flexbox or you need to center an item in the container, you can use position to place the element in the center of its container.

Instead, we can combine position and transform to vertically center highly variable elements. For example, to center an element vertically across the entire height of the viewport, you can use the following code snippet:

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

We first create the positioning context by setting position: relative on the container element. This will allow us to locate the .vertical-center element within its boundaries.

Next, we place the upper left corner of the element to be centered at the center of its container by placing its top edge at 50% of the top of its parent element and its left edge at 50% of the left of its parent element place.

Finally, adjust the element back to the center by panning it upwards 50% of its height and 50% of its width to the left. Now our elements are centered vertically and horizontally within the container. Since placement is done using a percentage value relative to the size of the element, the element will remain centered if the width or height of the container or child element changes.

View example: CodePen link

How to use line-height to center vertically at fixed height

To center a single line of text or icon vertically within its container, use the line-height attribute. This property controls the height of a line in the text run and adds an equal amount of space above and below the wireframe of the inline element. If the height of the container is known, setting the line-height of the same value will neuter the child element vertically.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

How to use vertical-align to center inline elements

vertical-align attribute only affects the elements that are displayed as inline, inline-block or table-cell.

It takes length, percentage, or keyword value.

Length and percentage align the baseline of an element with a given distance above its parent element baseline.

Keyword value can be one of the following:

• baseline
• sub
• super
• text-top
• text-bottom
• middle
• top
• bottom

Most of these are very intuitive, but sub align the baseline with the subscript baseline of the parent element, while super align the baseline of the element with the superscript baseline of the parent element.

Let's take a look at vertical-align in a practical example.

Here is an image and text grid, both of which have different heights, meaning that the text is not all neatly aligned.

(The HTML code in the original text should be inserted here and modified accordingly to make it more concise and easy to understand, and avoid using invalid links)

We can set the grid container to display: inline-block and use vertical-align: bottom on the image to make everything line up neatly.

If there is no text here, and we want all images to be centered vertically, we can use vertical-align: middle and get pretty good results.

For more centering methods, be sure to check out how to use CSS Grid for horizontal and vertical centering.

FAQ on how to center text and icons vertically in CSS

(The original FAQ part has been streamlined here, retaining the core information, and expressing some answers more clearly.)

What is vertical alignment?

Vertical alignment in CSS is an attribute that controls the position of elements along the vertical axis. It is a powerful tool that helps you design your layout accurately and flexibly. It can be used to vertically center elements, align them with the top or bottom of the container, or evenly distribute them in the vertical space. The vertical-align attribute in CSS is usually used with inline or inline block elements, but can also be used with table cells.

How to use CSS to vertically center text?

can use display: flex and align-items: center to center text vertically.

Can you use vertical alignment to process block-level elements?

The block-level elements can be aligned vertically using position: relative; top: 50%; transform: translateY(-50%);.

Why does my vertical alignment not work?

Causes may include the parent container not specifying a height, or attempting to align block-level elements using vertical-align.

How to align images vertically?

The same method as text can be used.

Can vertical alignment be used to handle CSS Grid?

Attributes can be used. align-items

How to vertically align text in buttons?

attribute, whose value should be the same as the button height. line-height

How to align multiple elements vertically?

Can absolute positioning be handled using vertical alignment?

properties can be used. top transform

Can be used

The above is the detailed content of How to Vertically Center Text and Icons in CSS. For more information, please follow other related articles on the PHP Chinese website!