auto/fit-content元素的container-type失效问题及解决方案咨询

• 我正在开发一个包含大量CSS动画的应用，网站性能因此有所下降，所以希望全站使用transform来提升多设备下的性能。
• 我想使用cqw单位将SVG定位到父元素的中间，但查询后发现container-type仅支持固定尺寸（这和它的设计初衷相违背），想咨询可行的解决方案。

代码示例 #

CSS代码 #

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  font-family:Arial;
}
.container{
  background-color:red;
  width:fit-content;
  height:fit-content;
  align-items:center;
  display:flex;
  container-type:inline-size;
}
svg{
/*transform:translateX(calc(50cwq - 50%));*/
  width:100px;
  aspect-ratio:1;
}

HTML代码 #

<div class="container">
  <svg  viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="m-path" d="M2 19V1L9 14.9091L16 1V19" stroke="#EEEEEE" stroke-width="2.5"/>
  </svg>  
  <div>this is a very long text whos width i dont know</div>
</div>

方案1：利用Flex布局原生属性实现居中（无需transform） #

既然父容器已设置display:flex，可以通过嵌套容器+justify-content实现SVG与文本整体居中，同时保留两者的并排布局：

.container{
  background-color:red;
  width:fit-content;
  height:fit-content;
  align-items:center;
  display:flex;
  justify-content: center; /* 新增：让内部元素整体水平居中 */
}
/* 新增包裹容器，确保SVG和文本保持并排 */
.content-group {
  display: flex;
  align-items: center;
}

修改HTML结构：

<div class="container">
  <div class="content-group">
    <svg viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path class="m-path" d="M2 19V1L9 14.9091L16 1V19" stroke="#EEEEEE" stroke-width="2.5"/>
    </svg>  
    <div>this is a very long text whos width i dont know</div>
  </div>
</div>

方案2：用CSS Grid快速实现居中（兼容场景更广） #

将父容器改为Grid布局，通过place-items一键实现水平+垂直居中，同样配合嵌套容器保留SVG与文本的并排：

.container{
  background-color:red;
  width:fit-content;
  height:fit-content;
  display: grid; /* 替换flex为grid */
  place-items: center; /* 同时实现水平、垂直居中 */
}
.content-group {
  display: flex;
  align-items: center;
}

HTML结构修改同方案1，这种方式代码更简洁，且不会影响动画性能。

方案3：必须用transform实现的替代方案 #

如果坚持要通过transform完成居中，可以用自定义属性结合JS动态计算父容器宽度，模拟cqw的效果：

.container{
  background-color:red;
  width:fit-content;
  height:fit-content;
  align-items:center;
  display:flex;
  --container-width: 100%; /* 初始化自定义属性 */
}
svg{
  width:100px;
  aspect-ratio:1;
  transform: translateX(calc((var(--container-width) * 0.5) - 50%));
}

添加JS动态更新宽度：

const container = document.querySelector('.container');
function syncContainerWidth() {
  container.style.setProperty('--container-width', `${container.offsetWidth}px`);
}
// 页面加载时初始化
syncContainerWidth();
// 窗口尺寸变化时同步更新
window.addEventListener('resize', syncContainerWidth);

这种方式既满足transform的性能需求，又能实现动态宽度下的居中效果。

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