How to Center Align Text in iOS SwiftUI

In this tutorial, we discuss an essential UI design aspect that can significantly enhance the visual appeal and readability of your app – the center alignment of text in SwiftUI. A well-placed, perfectly aligned text element can make your app interfaces clear, intuitive, and visually balanced. So, let’s delve deeper into understanding this integral concept.

Basics: Center Aligning Text

To center align text in SwiftUI, you can use the .multilineTextAlignment() modifier and set its parameter to .center:

Text("Hello, SwiftUI!")
    .multilineTextAlignment(.center)

In the above example, the text “Hello, SwiftUI!” is center-aligned within its frame.

Centering Text in Parent Views

However, using .multilineTextAlignment() only aligns the text within its own bounding box. To center the text within the parent view, we need to apply appropriate modifiers to the parent view itself. For example, when placing the text view inside a VStack or HStack, we can specify alignment:

VStack(alignment: .center) {
    Text("Hello, SwiftUI!")
}

In this case, “Hello, SwiftUI!” is center-aligned within the VStack.

Alignment with Spacer

Another popular way to achieve center alignment in SwiftUI is by using Spacer() views. Spacer views push adjacent views as far as they can go:

HStack {
    Spacer()
    Text("Hello, SwiftUI!")
    Spacer()
}

Here, the Spacer views are pushing the Text view to the center of the HStack.

Understanding and implementing text alignment in SwiftUI is crucial in creating intuitive and aesthetically pleasing user interfaces. Whether it’s within the text view’s bounding box, within a parent view, or using spacers, SwiftUI provides several powerful tools to perfectly align your text and other elements.