两侧隐藏溢出的中心任何滑块答案

【问题标题】：Center AnythingSlider with hidden overflow on both sides两侧隐藏溢出的中心任何滑块
【发布时间】：2016-05-19 15:38:33
【问题描述】：

我的目标是让滑块宽 1280 像素并位于页面中心。我希望内容的边缘在两侧都有隐藏的溢出。例如，我希望内容的中心始终保持在页面的中心，随着浏览器的大小调整，每一边都被切断，没有出现水平滚动条。

有没有一种简单的方法可以做到这一点？

【问题讨论】：

标签： javascript jquery html css anythingslider

【解决方案1】：

我最终得到了一个有点有趣的解决方案，它在我测试过的（至少）Chrome、Firefox 和 Safari 中对我有用。它可能有点hacky，但结果很酷。

这就是我所做的：我放置了一个宽度为1280px 的.wrapper。边距是0 auto 除了左边距，这就是它发生的地方。左边距需要设置为div 宽度的一半。在本例中为640px。但是，因为它必须溢出到左侧屏幕之外，所以它必须设置为负数（即-640px）。然后为了在屏幕变大时扭转这种效果，然后将屏幕 left:50% 推到正确的数量上。显然，为了使 margin:0 auto 真正起作用，position 必须设置为 relative（或者 absolute，如果你愿意的话）。

.wrapper { width:1280px;
           margin:0 auto 0 -640px; 
           position:relative; 
           left:50% 
         }

唯一的问题
不过，我发现它有一个问题。因为我们使用的是负边距，它会将 div 向左推到无法看到屏幕或浏览器窗口是否太小的位置。让我知道这是否是一个问题，并使其对您不起作用。

【讨论】：

哇，这似乎工作得很好。在玩不同的设置之前，我浪费了很多时间。谢谢！
小屏幕的解决方案是什么？现在只是好奇，但我可能会遇到类似的问题
很高兴这成功了！老实说，我没有针对小屏幕的解决方案，但是如果您需要针对小屏幕的解决方案，我会再搞砸。

【解决方案2】：

添加这个css类

  .overflowbothsides{
  vertical-align: middle;
  margin: 0 auto;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

带有代码和示例的解决方案 enter link description here

【讨论】：