如何实现尺寸动态变化的正方形/圆角固定HTML元素水平垂直居中？

针对固定定位且需保持宽高始终相等的元素，以下是几种实用的实现方案，覆盖不同浏览器兼容性需求：

方案1：aspect-ratio + CSS Transform（推荐现代浏览器） #

利用CSS3的aspect-ratio属性直接强制宽高比为1:1，配合固定定位与Transform实现精准居中，代码简洁逻辑清晰。

<div class="square-box"></div>

.square-box {
  position: fixed;
  /* 动态宽度，可根据需求调整（如基于视窗或父元素） */
  width: 40vw;
  /* 强制宽高比1:1，确保始终是正方形 */
  aspect-ratio: 1 / 1;
  /* 圆角设置，如需圆形则设为50% */
  border-radius: 10px;
  background: #2c3e50;
  /* 水平垂直居中核心逻辑 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

逻辑说明 #

• aspect-ratio:1/1确保元素高度始终等于宽度，无论宽度如何动态变化；
• left:50%和top:50%将元素左上角定位到视口中心，transform:translate(-50%,-50%)通过元素自身尺寸的一半偏移，实现真正的中心对齐。

方案2：Flexbox容器 + aspect-ratio #

适合需要在固定定位容器内居中多个元素，或想利用Flexbox灵活对齐能力的场景：

<div class="fixed-container">
  <div class="square-box"></div>
</div>

.fixed-container {
  position: fixed;
  /* 让容器占满整个视口 */
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.square-box {
  width: 300px;
  /* 最大宽度限制，避免小屏幕下元素超出视口 */
  max-width: 80vw;
  aspect-ratio: 1 / 1;
  border-radius: 50%; /* 实现圆形 */
  background: #e74c3c;
}

逻辑说明 #

• 固定定位的容器铺满视口，Flexbox的justify-content:center和align-items:center直接将子元素居中；
• max-width:80vw保证元素在小屏幕下不会溢出，aspect-ratio维持正方形比例。

方案3：Padding-Top 兼容旧浏览器（无需aspect-ratio） #

针对不支持aspect-ratio的旧浏览器（如IE），利用padding百分比基于宽度计算的特性实现正方形：

<div class="square-box">
  <div class="content">动态内容</div>
</div>

.square-box {
  position: fixed;
  width: 50%;
  /* padding-top等于宽度百分比，强制高度等于宽度 */
  padding-top: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #f39c12;
  /* 为内部内容准备定位上下文 */
  position: relative;
}

.content {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

逻辑说明 #

• padding-top:50%使得元素高度等于宽度（padding百分比参考元素自身宽度）；
• 内部内容通过绝对定位铺满正方形，再用Flexbox实现内容居中。

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