How to center the text in the box in html

There are four ways to center the text in an HTML box: Use the CSS text-align: center property to center it horizontally. Use the padding-block-start and padding-block-end properties for vertical centering. Use Flexbox display: flex; justify-content: center; align-items: center for flexible alignment. Use Grid grid-template-columns: repeat(auto-fit, minmax(0, 1fr)

How to center the text in the box in HTML

In HTML, there are many ways to center the text in the box:

Use CSS properties

text-align: center: The most commonly used Method that centers the text horizontally within the container.

.container {
  text-align: center;
}

padding-block-start and padding-block-end: apply to vertically centered text. Set these properties to the same Pixel value to vertically center text in a block container.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}

Using Flexbox

display: flex; justify-content: center; align-items: center: Use Flexbox methods to flexibly align elements. This snippet centers text horizontally and vertically.

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

Using Grid

grid-template-columns: repeat(auto-fit, minmax (0, 1fr)); justify-content: center; align-items: center: Use the Grid method to create a grid layout. This code snippet creates a one-column grid that centers text horizontally and vertically.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
}

The above is the detailed content of How to center the text in the box in html. For more information, please follow other related articles on the PHP Chinese website!