How Can I Center Text Over an Image Using Flexbox and CSS Positioning?

Center Text Over an Image in Flexbox and CSS Positioning

Centering text over an image is a common layout requirement. While Flexbox offers powerful alignment options, you can also achieve this effect with CSS positioning properties.

Using Absolute Positioning

To center text over an image using absolute positioning:

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

• Set a static position value for the body to establish a positioned ancestor for absolute positioning.
• Absolutely position the text element.
• Horizontally center the text with left: 50%; and vertically center it with top: 50%;.
• Use a transform to fine-tune the centering by translating it half its width and height.

Using Flexbox

Alternatively, Flexbox can be used for both image and text positioning:

body {
  margin: 0px;
}
...
.height-100vh {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}
.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

• Wrap both the image and text elements in a Flexbox container with a height property.
• Set align-items: center; and justify-content: center; to align items vertically and horizontally within the container.
• Absolutely position the text element within the container and style it as desired.

The above is the detailed content of How Can I Center Text Over an Image Using Flexbox and CSS Positioning?. For more information, please follow other related articles on the PHP Chinese website!