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)
In HTML, there are many ways to center the text in the box:
text-align: center: The most commonly used Method that centers the text horizontally within the container.
<code class="css">.container { text-align: center; }</code>
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.
<code class="css">.container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block-start: 1rem; padding-block-end: 1rem; }</code>
display: flex; justify-content: center; align-items: center: Use Flexbox methods to flexibly align elements. This snippet centers text horizontally and vertically.
<code class="css">.container { display: flex; justify-content: center; align-items: center; }</code>
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.
<code class="css">.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); justify-content: center; align-items: center; }</code>
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!