CSS 元素水平垂直居中大揭秘：已知宽高与不定宽高的全方位解析

元素的水平垂直居中是前端开发中常见的需求，尤其是在响应式布局和动态内容中。这里我们将从背景、实现方式、应用场景等方面来详细讲解几种常见的元素居中的方法，并结合实际项目代码示例进行展示。

一、常见的居中方法

1. Flexbox 布局

Flexbox 是一种非常灵活的布局方式，可以轻松实现元素的水平和垂直居中。它不依赖元素的宽高，适用于动态内容和不定宽高的元素。

背景

Flexbox 是 CSS3 中的新布局模块，它简化了复杂布局的实现，特别是居中操作。

实现方式

<template>
  <div class