如何实现水平居中元素在屏幕顶部、中部及底部的定位

现代CSS布局中，Flexbox和CSS Grid是实现这类需求最简洁、高效的方案，下面分别给出具体实现：

方法一：Flexbox 实现 #

利用Flexbox的垂直分布特性，将页面容器（如<body>）设置为垂直方向的Flex容器，通过margin: auto让中间元素自动居中，顶部和底部元素自然分布在首尾。

HTML结构 #

<body>
  <div class="top-element">顶部水平居中元素</div>
  <div class="center-element">屏幕中央元素</div>
  <div class="bottom-element">底部水平居中元素</div>
</body>

CSS代码 #

/* 重置默认边距，确保容器占满视口高度 */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* 所有元素水平居中 */
}

/* 顶部元素：默认在容器顶部 */
.top-element {
  padding: 1rem;
  background: #f0f0f0;
}

/* 中间元素：通过margin:auto自动占据剩余空间，实现垂直居中 */
.center-element {
  margin: auto;
  padding: 2rem;
  background: #e0e0e0;
}

/* 底部元素：默认在容器底部 */
.bottom-element {
  padding: 1rem;
  background: #f0f0f0;
}

方法二：CSS Grid 实现 #

Grid布局更直观，将页面划分为三行网格，第一行和第三行高度由内容决定，第二行占据剩余空间，同时设置所有单元格水平居中。

HTML结构 #

与Flexbox方案的HTML结构一致。

CSS代码 #

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* 首行/尾行高度自适应，中间行占满剩余空间 */
  place-items: center; /* 所有元素水平+垂直居中（针对单元格内） */
}

.top-element {
  padding: 1rem;
  background: #f0f0f0;
}

.center-element {
  padding: 2rem;
  background: #e0e0e0;
}

.bottom-element {
  padding: 1rem;
  background: #f0f0f0;
}

方案对比 #

• Flexbox：适合一维布局（垂直或水平），代码简洁，兼容性好（支持所有现代浏览器及IE11）。
• CSS Grid：适合二维布局，语义化更强，布局逻辑更清晰，适合复杂网格场景，兼容性稍弱（支持现代浏览器，IE11仅部分支持）。

两种方案都能完美实现需求，可根据项目兼容性要求和个人习惯选择。

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