如何实现h1元素水平与垂直居中？解决居中冲突及响应式问题

Let's fix this centered text problem once and for all. Your earlier attempts ran into common pitfalls: vertical-align: middle doesn't work on block-level elements like your .main-text div, and absolute positioning with fixed percentages breaks responsiveness because it doesn't adapt to different screen sizes. Here are the best responsive solutions:

1. Flexbox (Recommended for Modern Browsers) #

Flexbox is the simplest, most reliable way to center content both horizontally and vertically, and it's fully responsive. Just add a few styles to your <header> container:

/* Reset default body margin to avoid unwanted spacing */
body {
  margin: 0;
}

header {
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center;     /* Centers content vertically */
  min-height: 100vh;       /* Makes header take up the full viewport height */
}

h1 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 28px;
  text-align: center; /* Optional: Ensures text inside h1 is centered if it wraps */
}

/* You can simplify .main-text since Flexbox handles the centering */
.main-text {
  /* No extra styles needed here unless you want to add padding/margin */
}

Your HTML can stay exactly as it is:

<header>
  <div class="main-text">
    <h1>This is Centered Text.</h1>
  </div>
</header>

Why this works: Flexbox is designed for flexible layouts. justify-content controls alignment along the horizontal axis, align-items handles the vertical axis, and min-height: 100vh ensures the header always spans the full height of the screen—so your text stays centered no matter how the viewport size changes.

2. CSS Grid (Even More Concise) #

If you prefer even shorter code, CSS Grid's place-items property lets you center content in one line:

body {
  margin: 0;
}

header {
  display: grid;
  place-items: center; /* Shorthand for justify-items: center + align-items: center */
  min-height: 100vh;
}

h1 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 28px;
  text-align: center;
}

This achieves the exact same result as Flexbox and is just as responsive.

3. Table Layout (For Older Browser Compatibility) #

If you need to support older browsers like IE10+, you can use table-based layout. This leverages the natural centering behavior of table cells:

body {
  margin: 0;
}

header {
  display: table;
  width: 100%;
  min-height: 100vh;
}

.main-text {
  display: table-cell;
  text-align: center; /* Horizontal centering */
  vertical-align: middle; /* Vertical centering */
}

h1 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 28px;
}

Why Your Previous Attempts Failed #

• vertical-align: middle: This property only works on inline, inline-block, or table-cell elements. Since .main-text is a block-level div, this style had no effect.
• Absolute positioning with top: 30%; left: 30%: This uses fixed percentages relative to the parent element, which won't adjust to the true center of different screen sizes. It also requires the parent to have a position: relative style to work correctly, and it can cause layout issues on smaller screens.

内容的提问来源于stack exchange，提问作者Arsalan Khattak