如何在X轴与Y轴上居中对齐任意元素？Flexbox实现子项内数字居中问题咨询

嘿，我来帮你解决这两个前端布局问题，而且完全用你想要的Flexbox来实现！

1. 通用方案：任意元素XY轴居中 #

要让任意元素在父容器里水平（X轴）+垂直（Y轴）居中，Flexbox是最省心的方案，只需要给父容器加这三行CSS：

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

不管子元素是固定尺寸还是动态大小，这个方法都能完美适配，不用再折腾margin、position那些老方法啦。

2. 让Flex子项里的数字精准居中（针对你的代码） #

看了你的代码，问题其实很明确：你的.i容器（也就是Flex子项）本身没有启用Flexbox布局，所以里面的<p>标签没法借助Flexbox来居中。你之前给<p>加的vertical-align、position: relative都是冗余操作，咱们简化一下就能搞定：

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Flex</title>
    <style>
        * {
            margin: 0;
            box-sizing: border-box; /* 推荐加上，避免边框/内边距撑开元素宽高 */
        }
        .con {
            display: flex;
            background-color: aquamarine;
            border: 4px solid wheat;
            padding: 16px;
            height: 511px;
            width: 95%;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .i {
            height: 60px;
            width: 400px;
            background-color: red;
            border: 4px solid darkslategray;
            flex: 1 1 auto;
            /* 核心修改：给每个子项也设置Flex布局，用来居中内部的数字 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #i2 {
            flex: 2 4 auto;
        }
        p {
            /* 去掉所有冗余属性，只保留你需要的尺寸（如果不需要可以直接删掉） */
            width: 20px;
            height: 20px;
            /* 可选：给数字加个白色背景更显眼 */
            /* background-color: white; */
        }
    </style>
</head>
<body>
    <div class="con">
        <div id="i1" class="i"><p>1</p></div>
        <div id="i2" class="i"><p>2</p></div>
        <div id="i3" class="i"><p>3</p></div>
    </div>
</body>
</html>

关键修改说明 #

• 给.i容器添加display: flex+justify-content: center+align-items: center：这样内部的<p>标签就会在红色子项的正中心，不管子项尺寸怎么变都能保持居中。
• 删掉了<p>标签里多余的position: relative、vertical-align: middle、margin: 0 auto：这些属性在Flex布局下完全没必要，反而会干扰居中效果。
• 全局加了box-sizing: border-box：这是前端布局的小技巧，能让元素的边框和内边距不会额外撑开宽高，避免布局出现意外偏移。

这样调整后，你的三个数字就能稳稳地待在每个红色子项的中心，同时父容器.con的居中逻辑也完全正常，完美符合你的需求！

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