How to Perfectly Center a Div Horizontally and Vertically While Preserving Content?

Horizontal and Vertical Div Centering with Content Preservation

In the realm of web development, it is often necessary to center a div both horizontally and vertically. While traditional methods such as absolute positioning and negative margins can achieve this, they often clip content when the div is not fully visible. This article presents a solution that ensures content is always displayed, regardless of the window size.

Modern Browser Solution: Flexbox

For modern browsers, flexbox offers an elegant solution to this problem. With flexbox, content can be centered by setting the parent container to display: flex and the child div to margin: auto.

<div class="parent">
  <div class="child">This works with any content</div>
</div>

.parent {
  display: flex;
}

.child {
  margin: auto;
}

Older Browser Support

For browsers that do not support flexbox, CSS transformations can be employed. By setting the div to position: absolute, left: 50%, and top: 50%, and then applying a transform of translate(-50%, -50%), the div will be centered.

<div class="content">This works with any content</div>

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

By using either flexbox or CSS transformations, one can center a div both horizontally and vertically, ensuring that content is always visible, regardless of the window size.

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