如何为HTML中自适应屏幕的SVG添加上下等距margin/padding？

需求说明 #

• 当前SVG已实现高度自适应屏幕且无滚动条，需略微缩小尺寸
• 在SVG与屏幕上下边缘添加相等的空白区域，且不出现滚动条
• 后续计划为瓶形SVG添加波浪动画模拟水晃动效果

尝试过的无效方案 #

• 全局设置margin:5dvh + SVG高度90dvh：出现滚动条，上下边距不均且SVG下移
• SVG设置padding:5dvh + 高度90dvh：无滚动条，但上下内边距依然不均，更换为固定值（10px）问题依旧

正确实现方案 #

方案1：Flex布局居中（推荐，语义清晰） #

利用flex布局的居中特性，让SVG在视口内垂直水平居中，通过max-height限制SVG高度，剩余空间自动均分作为上下空白：

<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0; box-sizing: border-box;}
body {
  min-height: 100dvh;
  display: flex;
  align-items: center; /* 垂直方向居中 */
  justify-content: center; /* 水平方向居中 */
  /* 若需要左右也留空白，可添加 padding: 0 5dvh; */
}
svg {
  display: block;
  max-height: 90dvh; /* SVG占视口90%高度，剩余10%自动分为上下各5%空白 */
  width: auto; /* 保持SVG原始宽高比，避免拉伸变形 */
}
</style>
</head>
<body>
<svg viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</body>
</html>

方案2：容器内边距方案 #

通过给容器设置上下内边距，让SVG在容器内占满剩余高度，实现上下空白均匀：

<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0; box-sizing: border-box;}
.container {
  min-height: 100dvh;
  padding: 5dvh 0; /* 上下各设置5dvh内边距，左右可按需添加 */
}
svg {
  display: block;
  height: 100%; /* SVG占满容器剩余高度，即100dvh - 10dvh = 90dvh */
  width: auto;
  margin: 0 auto; /* 水平居中SVG */
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>
</body>
</html>

margin与padding的语义选择 #

• padding：适合作为容器内部空白，空白属于容器的一部分，不会影响外部元素布局，是本次场景的优选方案。直接给SVG加padding会改变其内部内容的显示区域（受viewbox和宽高比影响），导致图形错位或边距不均，这也是之前尝试失败的原因。
• margin：用于控制元素与外部元素的间距，若给SVG设置margin，需确保容器有足够的容纳空间（比如容器高度为100dvh），但语义上不如padding清晰，不推荐用于本次场景。

内容的提问来源于stack exchange，提问作者Mammoth-Winner-1579