horizontal scrollable list fully centered with dynamic width items
<p>I'm trying to make an horizontal list to be centered, with its items to be centered too regarding the main parent (the window, or body) ; and because i don't know what kind and how many items i will have generated into that list, i'd need the items to be dynamic in width and the list scrollable so i can browse over all of them.</p>

<p>My attempts so far are good, i'm getting either : a centered list with non-centered items of dynamic width ; and a fully centered scrollable list with fixed width items.</p>

<p>The core idea is basically achieved by using:</p>

<pre><code>ul {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

li {
  display: inline-block;
}
</code></pre>

<p>Then the centering is made by wrapping the <code>&lt;ul&gt;</code> into a <code>&lt;div&gt;</code>, and making the <code>&lt;div&gt;</code> scroll the <code>&lt;ul&gt;</code> instead of the <code>&lt;ul&gt;</code> scrolling the <code>&lt;li&gt;</code>. It allows to add % based margins to the <code>&lt;ul&gt;</code></p>

<pre><code>div {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

ul {
  margin: 0 50%;
}

li {
  display: inline-block;
}
</code></pre>

<p>For items to be centered by width, the idea is to use <code>translateX(-50%)</code> with a little twist: as i don't want my list to have extra space at the end of the scrolling, I'm removing the last item from the flow by positioning it in absolute at the end ; that way, the <code>&lt;ul&gt;</code> width looks like the sum of the items width minus one item.</p>

<pre><code>ul {
  position: relative;
  margin: 0 50%;
}

li {
  display: inline-block;
  width: some_number;
  transform: translateX(-50%);
}

li:last-child {
  position: absolute;
  left: 100%;
}
</code></pre>

<p><strong>But how to keep it that way without setting the width is a mystery to me.<br>
Any ideas out there ?</strong></p>

<p>Here's my fiddle with some comments in the CSS section : <a href="https://jsfiddle.net/11gkrju0/" rel="nofollow">https://jsfiddle.net/11gkrju0/</a></p>

<p>I'd like <em>not</em> to use javascript at all for that as it is only a matter of styling, but messing with the dom is a totally viable option.</p>

<p>Thanks all for reading,</p>