Hi, what's the best way to vertically center some text on a Web page?

Just asked DeepSeek a question:

Hi, what's the best way to vertically center some text on a Web page?

DeepSeek's answer was pretty solid:

Vertically centering text on a web page can be achieved in several ways, depending on the context and the layout method you're using. Here are some of the most common and effective techniques:

1. Using Flexbox

Flexbox is one of the easiest and most flexible ways to center content both vertically and horizontally.

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <p>Centered Text</p>
</div>

display: flex; enables Flexbox.
justify-content: center; centers the content horizontally.
align-items: center; centers the content vertically.
height: 100vh; makes the container take up the full viewport height.

2. Using Grid

CSS Grid is another powerful layout system that can easily center content.

<div style="display: grid; place-items: center; height: 100vh;">
  <p>Centered Text</p>
</div>

display: grid; enables Grid.
place-items: center; centers the content both vertically and horizontally.
height: 100vh; makes the container take up the full viewport height.

3. Using Absolute Positioning and Transform

This method is useful when you need to center an element within a parent container.

<div style="position: relative; height: 100vh;">
  <p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">Centered Text</p>
</div>

position: relative; on the parent container.
position: absolute; on the child element.
top: 50%; left: 50%; moves the element to the center of the container.
transform: translate(-50%, -50%); adjusts the element's position to truly center it.

4. Using Table Display

This method uses CSS table properties to center content.

<div style="display: table; width: 100%; height: 100vh;">
  <div style="display: table-cell; vertical-align: middle; text-align: center;">
    <p>Centered Text</p>
  </div>
</div>

display: table; on the parent container.
display: table-cell; on the child container.
vertical-align: middle; centers the content vertically.
text-align: center; centers the content horizontally.

5. Using Line Height (for single lines of text)

If you have a single line of text and a fixed height, you can use the line-height property.

<div style="height: 100px; line-height: 100px; text-align: center;">
  <p>Centered Text</p>
</div>

height: 100px; sets the height of the container.
line-height: 100px; makes the line height equal to the container height, centering the text vertically.
text-align: center; centers the text horizontally.

6. Using Padding

If you know the height of the container, you can use padding to center the text.

<div style="padding: 50px 0; text-align: center;">
  <p>Centered Text</p>
</div>

padding: 50px 0; adds equal padding to the top and bottom, centering the text vertically.
text-align: center; centers the text horizontally.

Conclusion

Flexbox and Grid are the most modern and flexible solutions.
Absolute positioning is useful for specific cases where you need to center within a parent container.
Table display and line-height are older methods but still useful in certain scenarios.

Choose the method that best fits your layout and requirements!

kentbrew/vertical_centering.md