title: SwiftUI How to vertically center a view inside a VStack
body: <p>I would like to have one view in the vertical center of the screen, one view at the top of the screen and one view vertically centered between these two views like so:</p>
  <p><a href="https://i.stack.imgur.com/287bo.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/287bo.jpg" alt="enter image description here" /></a></p>
  <p>This took me 5min to do on a storyboard but I don't seem to find a way to do it in SwiftUI .</p>
  <p>I already tried with multiple zstacks, vstacks, multiple custom alignments but this is the closest I got:</p>
  <pre><code>struct SelectionView: View {
      var body: some View {
          ZStack(alignment: .myAlignment) {
              Color.green
                  .edgesIgnoringSafeArea(.all)
              
              
              VStack {
                  Image(systemName: &quot;clock&quot;)
                      .resizable()
                      .foregroundColor(.white)
                      .aspectRatio(contentMode: .fit)
                      .frame(width: 156, height: 80)
                  
  //                Spacer()
                  
                  Text(&quot;My\nmultiline label&quot;)
                      .multilineTextAlignment(.center)
                      .font(.title)
                      .foregroundColor(.white)
  
  //                Spacer()
                  
                  VStack(spacing: 16) {
                      RoundedRectangle(cornerRadius: 5).fill(Color.white).frame(height: 79)
                      RoundedRectangle(cornerRadius: 5).fill(Color.white).frame(height: 79)
                  }
                  .alignmentGuide(VerticalAlignment.myAlignment) { dimension in
                      dimension[VerticalAlignment.center]
                  }
                  .layoutPriority(1)
              }
              .padding([.leading, .trailing], 24)
          }
      }
      
  }
  
  struct SelectionView_Previews: PreviewProvider {
      static var previews: some View {
          LanguageSelectionView()
      }
  }
  
  // MARK
  
  extension HorizontalAlignment {
    
      enum MyHorizontal: AlignmentID {
          static func defaultValue(in d: ViewDimensions) -&gt; CGFloat
                   { d[HorizontalAlignment.center] }
      }
  
      static let myAlignment =
                   HorizontalAlignment(MyHorizontal.self)
  }
  
  extension VerticalAlignment {
      enum MyVertical: AlignmentID {
          static func defaultValue(in d: ViewDimensions) -&gt; CGFloat
                   { d[VerticalAlignment.center] }
      }
    
      static let myAlignment = VerticalAlignment(MyVertical.self)
  }
  
  extension Alignment {
      static let myAlignment = Alignment(horizontal: .myAlignment,
                                 vertical: .myAlignment)
  }
  </code></pre>
  <p>I'm keeping the GeometryReader as a last resort as it feels like a too drastic measure for this seemingly simple layout..</p>
  <p>I guess I'm approaching this in some wrong way (still too much UIKit/Constraints in my head)..</p>