Html 将响应元件置于水平滚动容器的中心

我创建了一个容器（红色边框，线表示中心），如果溢出，它会水平滚动

此容器的第一个子项（紫色块）始终是一个按钮

单击此按钮时，它会向容器中添加其他子级

我想做的是找到一种使用纯CSS的方法，这样在加载应用程序时，第一个子元素始终居中，如果容器中有多个子元素，那么容器中的最后一个子元素也可以滚动到容器的中心

我很难弄清楚这一点，因为我对子元素应用了

min width

（即

100px

）和响应

width

（即

25vw

）

我最初计划实现这一点的方法是，对父容器应用

填充left

，然后在

：not（.first child）之后应用
：伪元素。children:last child
，但后来我意识到，如果我希望它完全响应，这种方法是不够的。但是，我知道我可以手动计算触发的宽度
minwidth
，然后使用
@media
查询，但我希望有更好的方法

#container {
  width: 100%;
  height: 100%;
  padding-left: ; /* Half the window width minus half the width of the child. */
  overflow-x: scroll;
  display: flex;
  align-items: center;
  background: skyblue;
  box-sizing: border-box;
  border: solid red 2px;
}

#container::-webkit-scrollbar {
  display: none;
}

.children {
  width: 25vw;
  min-width: 100px;
  height: 50%;
  min-height: 200px;
  position: relative;
  margin-right: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: purple;
}

:not(.first-child).children:last-child::after {
  content: '';
  width: ; /* Half the window width minus half the width of the child. */
  height: 100%;
  position: relative; /* relative or absolute      */
  left: ;             /* and offset appropriately. */
  transform: ;        /*                           */
}

有人知道怎么做吗？
您可以将
左边距
应用于第一个子项，并使用媒体查询处理最小宽度。当屏幕小于<代码> 400 px < /代码> <代码> 25vw < /代码>将小于100px，并更改值以考虑<代码> 100px < < /P>

#容器{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
溢出-x：滚动；
显示器：flex；
对齐项目：居中；
背景：
线性梯度（红色，红色）中心/1px 100%无重复，
天蓝色；
框大小：边框框；
边框：纯红2px；
}
#容器：：-webkit滚动条{
显示：无；
}
.儿童{
宽度：25vw；
最小宽度：100px；
身高：40%；
最小高度：100px；
位置：相对位置；
右边距：5px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：紫色；
弹性收缩：0；/*不要忘记这一点以避免收缩*/
}
.儿童：第一个孩子{
左边距：计算值（50%-12.5vw）；
}
@介质（最大宽度：400px）{
.儿童：第一个孩子{
宽度：25vw；
最小宽度：100px；
左边距：计算（50%-50px）；
}
}
您可以将
左边距
应用于第一个子项，并使用媒体查询处理最小宽度。当屏幕小于<代码> 400 px < /代码> <代码> 25vw < /代码>将小于100px，并更改值以考虑<代码> 100px < < /P>

#容器{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
溢出-x：滚动；
显示器：flex；
对齐项目：居中；
背景：
线性梯度（红色，红色）中心/1px 100%无重复，
天蓝色；
框大小：边框框；
边框：纯红2px；
}
#容器：：-webkit滚动条{
显示：无；
}
.儿童{
宽度：25vw；
最小宽度：100px；
身高：40%；
最小高度：100px；
位置：相对位置；
右边距：5px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：紫色；
弹性收缩：0；/*不要忘记这一点以避免收缩*/
}
.儿童：第一个孩子{
左边距：计算值（50%-12.5vw）；
}
@介质（最大宽度：400px）{
.儿童：第一个孩子{
宽度：25vw；
最小宽度：100px；
左边距：计算（50%-50px）；
}
}
我能够使用
calc
创建一个严格响应的解决方案，即使我使用
vh
作为孩子的
宽度。CSS是救世主

#container {
--offset: calc(50vw - ((100vh / 100) * 20);
  padding-left: var(--offset);
  background: skyblue;
}

.children {
  min-width: 40vh; /* vh is used for width to account for the height of window. */
  min-height: 60vh;
  position: relative;
  background: purple;
}

:not(.first-child).children:last-child::after {
  content: '';
  width: var(--offset);
  height: 1px;
  position: absolute;
  left: 100%;
}

我能够使用
calc
创建一个严格响应的解决方案，即使我使用
vh
作为孩子的
宽度。CSS是救世主

#container {
--offset: calc(50vw - ((100vh / 100) * 20);
  padding-left: var(--offset);
  background: skyblue;
}

.children {
  min-width: 40vh; /* vh is used for width to account for the height of window. */
  min-height: 60vh;
  position: relative;
  background: purple;
}

:not(.first-child).children:last-child::after {
  content: '';
  width: var(--offset);
  height: 1px;
  position: absolute;
  left: 100%;
}

为什么不使用
左填充：25vw
？@MatanSanbira，因为
宽度
是
25vw
，但更重要的是，子元素上有一个
min width
，所以可能会丢弃
min width
，并使用@media进行小尺寸的压缩screens@MatanSanbira我可以，但我不确定我必须。另外，我不想这样做，尤其是如果我不必使用
padding left:25vw
？@MatanSanbira，因为
宽度
是
25vw
，但更重要的是，子元素上有一个
min width
，所以可能会丢弃
min width
，并使用@media进行小尺寸的压缩screens@MatanSanbira我可以，但我不确定我必须。另外，我不想，特别是如果我明天早上醒来时没有测试伪元素方法，那么网站最近有什么乱七八糟的？是的，就像我加载页面时，有时元素或文本到处都是，我必须刷新页面以使所有内容正常工作。我刚刚意识到孩子们的
宽度需要响应，但它也需要考虑到浏览器窗口的高度，所以目前我使用
宽度：40vh
（和
高度：60vh
）. 有没有办法这样做？也许使用流体？？？@oldboy我的代码仍然适用，你只需要使用
calc（50%-X）
其中X是你为元素定义的宽度的一半我明天醒来时会测试伪元素方法最近网站出了什么问题？是的，就像我加载页面时一样，有时元素或文本到处都是，我必须刷新页面以使所有内容正常工作。我刚刚意识到孩子们的
宽度需要响应，但它也需要考虑到浏览器窗口的高度，所以目前我使用
宽度：40vh
（和
高度：60vh
）. 有没有办法这样做？也许是用液体？？@oldboy我的c