如何为保持宽高比的居中div设置px单位的外边距？

要给这个固定宽高比的div添加px单位的外边距，同时保持居中且不溢出，核心是预留出外边距的空间，避免元素尺寸加上外边距后超出视口。下面是两种可行的实现方式：

方式一：基于原有绝对定位逻辑修改 #

我们需要在计算元素的宽高、最大宽高时，把上下左右的外边距从视口尺寸中扣除，同时维持7:5的宽高比：

.myDiv {
  --margin: 20px; /* 自定义外边距大小，方便统一修改 */
  width: calc(100vw - 2 * var(--margin));
  height: calc((100vw - 2 * var(--margin)) * 5 / 7);
  max-height: calc(100vh - 2 * var(--margin));
  max-width: calc((100vh - 2 * var(--margin)) * 7 / 5);
  background-color: red;
  margin: var(--margin);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

关键逻辑说明： #

• width: calc(100vw - 2 * var(--margin))：从视口宽度中减去左右两边的外边距，确保元素宽度不会超出视口范围
• 高度基于扣除外边距后的宽度计算，严格保持5/7的宽高比
• max-height: calc(100vh - 2 * var(--margin))：从视口高度中减去上下外边距，限制元素最大高度不超出视口
• max-width 基于扣除外边距后的最大高度反向计算，维持7:5的宽高比（高×7/5=宽）

方式二：改用Flex布局（更简洁直观） #

如果允许调整父元素布局，使用Flex实现居中会省去复杂的calc计算，逻辑更清晰：

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* 这里的padding就是给div预留的"外边距"空间 */
  box-sizing: border-box;
}

.myDiv {
  width: 100%;
  height: calc(100% * 5 / 7);
  max-width: calc(100vh * 7 / 5);
  max-height: 100vh;
  background-color: red;
}

关键逻辑说明： #

• 给body设置padding，相当于为div提供了外边距空间，box-sizing: border-box确保padding不会让body超出视口
• Flex布局的justify-content: center和align-items: center直接实现div的水平、垂直居中
• div的width:100%会自适应body的可用宽度（视口宽度-左右padding），高度基于宽度保持宽高比，max-width/max-height限制最大尺寸

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