title: SwiftUI ScrollView won't center content with GeometryReader
body: <p>I have a horizontal ScrollView in SwiftUI that I would like to 'dynamically' center. the content within the scrollview will be a dynamic chart, and the user can change the width of it by changing years (5, 10, 15 year chart grows horizontally).</p>
  <p>Anyway I have <strong>two problems</strong>:</p>
  <ol>
  <li><p>My content in the horizontal scrollview seems to be aligned left, and any attempt at centering it with padding is just leaving it off centered and makes it difficult to account for various screen sizes.</p>
  </li>
  <li><p>When I try using a GeometryReader, my chart's 'legend' at the bottom gets shoved to the bottom of the page, Spacer() doesn't fix it.</p>
  </li>
  </ol>
  <pre><code>struct ChartView: View {   
      var body: some View {
          VStack(alignment: .center) {
              GeometryReader { geo in
                  ScrollView(.horizontal, showsIndicators: false) {
                      HStack {
                         ForEach(0..&lt;self.chartSettings.getChartYears(), id:\.self) { index in
                             ColumnView()
                         }
                      }
                  }
                  .background(Color.gray)
                  .frame(maxHeight: geo.size.height/2)
              }
              
              
              //Chart Legend
              HStack{
                  Rectangle()
                      .frame(width: 10, height: 10)
                      .foregroundColor(Color.init(#colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)))
                  Text(&quot;First Value&quot;)
                      .font(.system(size: 12))
                  
                  Rectangle()
                      .frame(width: 10, height: 10)
                      .foregroundColor(Color.init(#colorLiteral(red: 0.2263821661, green: 0.4659538441, blue: 0.08977641062, alpha: 1)))
                  Text(&quot;Second Value&quot;)
                      .font(.system(size: 12))
              }
          }
      }
  }
  </code></pre>
  <p><strong>Left</strong> is what it looks like with current code and <strong>right</strong> is what I'm hoping it looks like regardless of screen size/iPhone model.</p>
  <p><a href="https://i.stack.imgur.com/oHkL2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oHkL2.png" alt="" /></a> <a href="https://i.stack.imgur.com/qOl5b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qOl5b.png" alt="enter image description here" /></a></p>
  <p><strong>Note</strong> This is the reason I'm using a scrollview:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;iframe src='https://gfycat.com/ifr/DeficientNiceInchworm' frameborder='0' scrolling='no' allowfullscreen width='400' height='210'&gt;&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>