How Can I Horizontally and Vertically Center a DIV While Preserving its Content?

Centering a DIV Horizontally and Vertically with Content Preservation

In situations where aligning a DIV both horizontally and vertically is crucial and the content must remain intact, it's necessary to find approaches that avoid the drawbacks of absolute positioning with negative margins.

While flexbox offers a modern solution that aligns content well, it may not be suitable for older browsers. For broader compatibility, consider the following method:

HTML:

<div>

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

This approach utilizes absolute positioning and CSS transforms (-webkit-transform and transform) to center the DIV. The transform function shifts the DIV's position by half of its width and height in both directions. This ensures that the content is preserved regardless of window size or content variations.

Explore this technique further on Codepen or JSBin to witness its effectiveness. For older browser support, alternative methods discussed elsewhere in this thread may be necessary.

The above is the detailed content of How Can I Horizontally and Vertically Center a DIV While Preserving its Content?. For more information, please follow other related articles on the PHP Chinese website!