Vertical Centering Content inside Scrollview

Question

I'm trying to code a simple login page on my app. I started using SwiftUI on my newly updated macOS Catalina. The Apple documentation is still lacking a lot. I need to center a VStack vertically on a Scrollview occupying the whole page with a "limit" on it's width of 400.

Something like this:

ScrollView(.vertical) {
    VStack {
        Text("Hello World")
    }
    .frame(maxWidth: 400, alignment: .center)
}

It was easy with UIScrollView, just needed to set the ContentView to fill height and width and then centering a Vertical StackLayout inside the Content View but now with SwiftUI I just wonder.

The goal is something like this (Credit to the author)

If someone is wondering why I want everything inside a scrollview, it's because my form is quite big and I expect the user to use both landscape and portrait view so I really need the content to be scrollable. Bear in mind also that in an iPad, the form doesn't fill the whole screen, that's why I want it centered vertically.

Alex Robinson · Accepted Answer · 2025-03-27 08:44:44Z

142

iOS 18+

iOS 18 adds defaultScrollAnchor(_:for:), which can be used to achieve this (described here by Keith Harrison).

ScrollView {
    // Form content
    VStack {
        Text("Form goes here")
    }
    // Set your max width (optional)
    .frame(maxWidth: 400)
    .padding()
    .background(Color.yellow)
}
// Center the scroll view's content
.defaultScrollAnchor(.center, for: .alignment)
// Disable bounce if the content fits (optional)
.scrollBounceBehavior(.basedOnSize)

iOS 17+

As of iOS 17, you can achieve this without a GeometryReader by using containerRelativeFrame to reserve space in a ZStack.

As a bonus you can also disable scroll bouncing with .scrollBounceBehavior(.basedOnSize).

ScrollView {
    ZStack {
        // Reserve space matching the scroll view's frame
        Spacer().containerRelativeFrame([.horizontal, .vertical])

        // Form content
        VStack {
            Text("Form goes here")
        }
        // Set your max width (optional)
        .frame(maxWidth: 400)
        .padding()
        .background(Color.yellow)
    }
}
// Disable bounce if the content fits (optional)
.scrollBounceBehavior(.basedOnSize)

iOS 13+

You can vertically center content in a scroll view by using GeometryReader to get the parent view's dimensions and setting the scroll view's content's minHeight to the parent's height.

When the content is too big to fit vertically it'll just scroll like normal.

For example:

var body: some View {
    GeometryReader { geometry in
        ScrollView(.vertical) {
            // Form content
            VStack {
                Text("Form goes here")
            }
            // Set your max width (optional)
            .frame(maxWidth: 400)
            .padding()
            .background(Color.yellow)

            // Make the scroll view full-width
            .frame(width: geometry.size.width) 

            // Set the content’s min height to the parent
            .frame(minHeight: geometry.size.height)
        }
    }
}

edited Mar 27 at 8:44

answered Feb 24, 2020 at 11:14

Alex Robinson

2,3471 gold badge19 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Matz Over a year ago

Thanks Alex, that helped with a very simple approach :)

chitgoks Over a year ago

Best solution for this case

NSGodMode Over a year ago

Also note that if you have defined the ScrollView with a direction you should also define the same axis for the scrollBounceBehaviour to work. If you have a .horizontal scrolling : .scrollBounceBehavior(.basedOnSize, axes: [.horizontal])

Nikola Cirjakovic Jun 24 at 9:32

Only the ScrollAnchorRole requires iOS 18, without it this can be used on iOS 17.

@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *) nonisolated public func defaultScrollAnchor(_ anchor: UnitPoint?) -> some View

@available(iOS 18.0, macOS 15.0, tvOS 18.0, watchOS 11.0, visionOS 2.0, *) nonisolated public func defaultScrollAnchor(_ anchor: UnitPoint?, for role: ScrollAnchorRole) -> some View

Alex Robinson Jul 2 at 22:42

The for: .alignment is required to match the same behaviour though. Without it, when you have content that is taller than the scroll view, it starts out vertically centred with the top and bottom of the content out of view.

andrewz Nov 5 at 3:48

Spacer().containerRelativeFrame([.horizontal, .vertical]) // Thank You!

Ahmed M. Hassan · Accepted Answer · 2021-10-24 09:11:57Z

36

I've build a more generic view based on @Alex answer

/// Custom vertical scroll view with centered content vertically
///
struct VScrollView<Content>: View where Content: View {
  @ViewBuilder let content: Content
  
  var body: some View {
    GeometryReader { geometry in
      ScrollView(.vertical) {
        content
          .frame(width: geometry.size.width)
          .frame(minHeight: geometry.size.height)
      }
    }
  }
}

You can use it anywhere in your app like this

  var body: some View {
    VScrollView {
      VStack {
        Text("YOUR TEXT HERE")
      }
    }
  }

answered Oct 24, 2021 at 9:11

Ahmed M. Hassan

1,32615 silver badges16 bronze badges

1 Comment

MACROSystems Over a year ago

I would like to know why the ScrollView doesn't knows the height, I looked into the docs but can't find it, do you know it?

Collectives™ on Stack Overflow

Vertical Centering Content inside Scrollview

2 Answers 2

iOS 18+

iOS 17+

iOS 13+

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

iOS 18+

iOS 17+

iOS 13+

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related