Several ways to center horizontally and vertically - cases

• Various mainstream writing methods (Flex, Grid, positioning, transform, etc.)
• Typical code + applicable scenarios + points to note
• Summary of available explanations for interviews

1. Flex layout is centered (most recommended and commonly used)

• The preferred choice for modern layouts with clear semantics.
• Not affected by the width and height of child elements.
• Can be used in responsive and adaptive scenarios.

:::demo [vanilla]

<html>
<div class="parent">
  <div class="child">居中内容</div>
</div>
</html>
<style>
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  background: #4f46e5;
  color: #fff;
  padding: 10px 20px;
}
</style>

:::

2. Grid layout centered (modern solution)

• Grid's place-items: center is the shorthand method.
• It is better when there is a lot of content and multi-dimensional control is required (such as multi-row and multi-column alignment).
• Flex is more suitable for one-dimensional layout, and Grid is more suitable for two-dimensional layout.

.parent {
  display: grid;
  place-items: center; /* 相当于 justify-items + align-items */
  height: 200px;
  border: 1px solid #ccc;
}

3. Absolute positioning + transform centering (classic and universal)

• Classic approach, excellent compatibility (IE8+).
• Does not rely on parent element layout properties.
• Disadvantages: Not flexible enough if the size of sub-elements changes or fluid layout is required.

.parent {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #10b981;
  color: white;
  padding: 10px 20px;
}

4. Absolute positioning + margin:auto centered (fixed width and height)

• Child elements must have fixed width and height.
• margin: auto will automatically divide the margin equally in all four directions.
• Commonly used in pop-up windows and modal boxes.

.parent {
  position: relative;
  height: 200px;
}
.child {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 100px;
  height: 50px;
  background: #ef4444;
  color: white;
  text-align: center;
  line-height: 50px;
}

5. Inline elements + text-align + line-height (suitable for single line text)

• Only suitable for single lines of text, not suitable for multi-line content or complex block-level elements.

.parent {
  height: 100px;
  line-height: 100px; /* 垂直居中（仅单行文本） */
  text-align: center; /* 水平居中 */
  border: 1px solid #ccc;
}

6. table-cell centering (old compatible solution)

• Compatibility is very good (IE7+).
• Not recommended for use in modern layouts, but may be mentioned in interviews as a historical scheme.

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  width: 100%;
  border: 1px solid #ccc;
}
.child {
  display: inline-block;
  background: #3b82f6;
  color: white;
  padding: 10px 20px;
}

7. CSS Grid + minmax() + auto-fit (more flexible centered layout)

• place-content: center can control the entire content block to be centered in the parent container at the same time.
• Suitable for responsive cards, empty status pages, etc.

.parent {
  display: grid;
  grid-template-columns: minmax(auto, 1fr);
  place-content: center;
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  background: #f59e0b;
  padding: 10px 20px;
  color: #fff;
}

8. Interview summary template

In Vue or React projects, I often use Flex layout to achieve horizontal and vertical centering: The parent container display:flex; justify-content:center; align-items:center; will do. If I encounter old projects or need precise control of position, I will also use absolute positioning + transform. In addition, in modern browsers, CSS Grid's place-items:center is the shortest way. Different options have their own pros and cons:

• Flex: the most versatile
• Grid: the simplest
• transform: most compatible

Bonus: Responsive + full-screen centering practical case (commonly used in loading pages)

<template>
  <div class="center-box">
    <h2>正在加载中...</h2>
  </div>
</template>

<style scoped>
.center-box {
  position: fixed;
  inset: 0; /* 等价于 top:0; right:0; bottom:0; left:0; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.9);
  z-index: 9999;
}
</style>