使用填充居中，而不是使用CSS (没有额外的包装器DIV)

在不使用额外包装器DIV的情况下，实现文本或其他元素的填充居中，可以通过CSS的Flexbox布局来实现。Flexbox是一个强大的布局工具，它可以轻松地实现元素的水平和垂直居中。

基础概念

Flexbox（弹性盒子）是一种用于创建灵活布局的CSS模块。它允许容器内的元素在必要时进行伸缩以适应可用空间。

类型

Flexbox布局主要通过设置容器的display属性为flex来启用。主要的对齐属性包括：

justify-content：用于主轴（通常是水平轴）上的对齐。
align-items：用于交叉轴（通常是垂直轴）上的对齐。

应用场景

导航菜单：使用Flexbox可以轻松创建响应式的导航栏。
卡片布局：在网格系统中，Flexbox可以帮助均匀分布卡片元素。
表单布局：使表单元素排列整齐，便于用户填写。

示例代码

以下是一个简单的例子，展示了如何使用Flexbox在不添加额外DIV的情况下，实现一个元素的填充居中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering</title>
<style>
  body {
    margin: 0;
    height: 100vh; /* 设置视口高度 */
    display: flex; /* 启用Flexbox */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  .centered-element {
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="centered-element">
  这里是居中的内容
</div>
</body>
</html>