How Can I Vertically Center a Div Using CSS?

Vertically Aligning a Div Using Margin:Auto

When it comes to horizontally centering a div, the commonly used technique is margin: 0 auto. However, for vertical alignment, the margin:auto auto syntax does not work as expected.

Why Vertical-Align:Middle Doesn't Work

Another potential solution, vertical-align: middle, fails because it's applicable only to inline-level elements, not block-level elements like divs.

Limitations of Margin for Vertical Alignment

Using margin: auto vertically leads to issues:

• Margin-top: auto and margin-bottom: auto result in zero used values.
• Margin-top: -50% calculates relative to the width of the containing block, not its height.

Workaround for Vertical Alignment

While the inability to vertically align divs using margins can be frustrating, there are workarounds. One popular approach involves nesting three elements:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.helper {
  position: absolute;
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}
.content {
  position: relative;
  top: -50%;
  margin: 0 auto;
  width: 200px;
  border: 1px solid orange;
}

<div class="container">
  <div class="helper">
    <div class="content">
      <p>stuff</p>
    </div>
  </div>
</div>

This technique effectively centers the div vertically within its parent container.

The above is the detailed content of How Can I Vertically Center a Div Using CSS?. For more information, please follow other related articles on the PHP Chinese website!