Constraints misplaced

I have started a new app - I am new to this. I am going through a tutorial and came to the constraints section. I placed some constraints and then delete them because the elements were off.

I placed two elements - a button and a label.

@IBOutlet weak var middleLabel: UILabel!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    view.backgroundColor = .green
    middleLabel.text = "Hello There!"
}

@IBAction func buttonTaped(_ sender: Any) {
    view.backgroundColor = .blue
    middleLabel.text = "Changed Text"
}

But the elements are placed in the center of the storyboard but on running it, the label is on the top and button is not there.

How do I re-apply the elements to center them on all iphones ?

XCode 11.3.1 on macOS Mojave

https://imgur.com/a/bmQY0iZ

You need to add two alignment constraints to place the views in the centre of the screen.

If you want to, you can place the two views inside a UIStackView to make positioning easier. To do this select the label and button, click the Embed In button in the bottom right of the screen (fifth from the left) and choose Stack View. You can modify how the stack view positions its containing views.

To align this stack view, select it and click the Align button in the bottom right of the screen (second from the left) and add Horizontally in Container and Vertically in Container constraints. This should position the label and button in the centre of the device.

If you don't want the label and button in a UIStackView you can always add constraints relative to each other.

Hope this helps.

Constraints misplaced
 
 
Q