I want to place a VStack including a few Text-Views in the center of the screen with a white background and opacity 50%. Therefore I tried the GeometryReader and know that it tries to consume 100% of the available size, but the end result looks strange. When I try to inspect the elements it seems to be caused by the ZStack containing the background image.

What do I need to do to align the VStack in the center?

ZStack {
            Image("demo-bg")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            GeometryReader { proxy in
                VStack {

                    Text("Test1")
                        .font(.largeTitle)
                        .foregroundStyle(.green)
                    Text("Test2")
                        .font(.largeTitle)
                        .foregroundStyle(.red)
                    Text("Test3")
                        .font(.largeTitle)
                        .foregroundStyle(.green)
                    Text("Test4")
                        .font(.largeTitle)
                    TextField("Result", text: $result).keyboardType(.numberPad)
                }
                .frame(width: proxy.size.width * 0.8)
                .background(.white)
            }
        }

/