已实现Footer底部固定，使用Flex布局居中Div遇阻求助

DevOps 小满

2026-8-18

问题分析

你已经通过.page-container的Flex布局实现了Footer固定在页面底部，但.optional-content-wrap无法居中的核心原因是：.content-wrap仅设置了flex:1来占满剩余空间，但没有成为Flex容器来控制子元素的居中规则；.optional-content-wrap的align-items:center只是让自身内部元素水平居中，无法让它自己在父容器里居中。

解决方案

修改CSS添加必要的Flex布局属性，同时修正HTML结构的小问题：

修改后的CSS代码

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0; /* 消除浏览器默认body外边距，避免不必要的滚动条 */
}
.content-wrap {
  flex: 1 1;
  display: flex; /* 将content-wrap设置为Flex容器 */
  justify-content: center; /* 子元素水平居中 */
  align-items: center; /* 子元素垂直居中 */
}
.optional-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让内部元素（h1、p）水平居中 */
  text-align: center; /* 可选：让文本内容也居中对齐 */
}

修改后的HTML代码

<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0"
         />
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
      <div class="page-container">
         <div class="content-wrap">
            <div class="optional-content-wrap">
               <h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
               <p>
                  Our HTML editor updates the webview automatically in real-time as
                  you write code.
               </p>
            </div>
         </div>
         <div>Footer</div>
      </div>
   </body>
</html>