Introduction

Text inside a UITextField often looks misaligned when the field is taller than the font, when a custom placeholder uses a different font, or when extra padding is added for icons. In many cases the fix is small, but the correct solution depends on whether the problem comes from alignment, insets, or the control's height.

Start With the Built-In Alignment

UITextField already exposes contentVerticalAlignment. For a standard login field, this is the first setting to try because it keeps the control simple and works well with default text rects.

1import UIKit
2
3final class LoginViewController: UIViewController {
4    private let emailField = UITextField()
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8
9        emailField.borderStyle = .roundedRect
10        emailField.font = .systemFont(ofSize: 17)
11        emailField.placeholder = "Email"
12        emailField.contentVerticalAlignment = .center
13    }
14}

If the field height is close to the font's natural line height, this is usually enough. It starts to look wrong when the field is much taller, because the default text rectangle may still leave the text visually low or high.

Override the Text Rects When You Need Precision

If you need consistent centering for normal text, editing text, and placeholders, subclassing is the dependable approach. The important point is to override all three rectangle methods so the field behaves the same in every state.

1import UIKit
2
3final class CenteredTextField: UITextField {
4    private let horizontalPadding: CGFloat = 12
5
6    private func centeredRect(for bounds: CGRect) -> CGRect {
7        let fontHeight = font?.lineHeight ?? 0
8        let textHeight = min(fontHeight, bounds.height)
9        let y = (bounds.height - textHeight) / 2
10
11        return CGRect(
12            x: horizontalPadding,
13            y: y,
14            width: bounds.width - horizontalPadding * 2,
15            height: textHeight
16        )
17    }
18
19    override func textRect(forBounds bounds: CGRect) -> CGRect {
20        centeredRect(for: bounds)
21    }
22
23    override func editingRect(forBounds bounds: CGRect) -> CGRect {
24        centeredRect(for: bounds)
25    }
26
27    override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
28        centeredRect(for: bounds)
29    }
30}

This pattern gives you direct control over the vertical position and also keeps left and right padding stable. If you add a leftView or rightView, adjust the width calculation so the text does not overlap the accessory view.

Make Auto Layout and Typography Match

Visual centering only works if the field is large enough for the chosen font. A 44-point text field with a body font is usually safe, while a smaller control can clip ascenders or descenders. It also helps to use Dynamic Type correctly so the field expands with larger accessibility sizes.

1emailField.translatesAutoresizingMaskIntoConstraints = false
2emailField.adjustsFontForContentSizeCategory = true
3emailField.font = .preferredFont(forTextStyle: .body)
4
5NSLayoutConstraint.activate([
6    emailField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
7    emailField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
8    emailField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
9    emailField.heightAnchor.constraint(greaterThanOrEqualToConstant: 44)
10])

With this setup, the font and the control height move in the same direction. That matters more than any one centering trick, because many apparent alignment bugs are really sizing bugs.

Check the Placeholder and Accessory Views

A placeholder rendered with a smaller font can make centered text look wrong even when the editing text is correct. The same thing happens when an icon view is taller than the text. Before rewriting layout code, verify whether the issue appears only in the placeholder state or only after editing begins.

1let iconView = UIImageView(image: UIImage(systemName: "envelope"))
2iconView.frame = CGRect(x: 0, y: 0, width: 28, height: 20)
3iconView.contentMode = .scaleAspectFit
4
5emailField.leftView = iconView
6emailField.leftViewMode = .always

When the field contains accessory views, centering is not only about the y position of the text. It is also about keeping the available text area balanced so the entire control feels aligned.

Common Pitfalls

• Overriding textRect but leaving editingRect and placeholderRect unchanged, which makes the field jump when editing starts.
• Making the field much taller than the font and assuming .center will always look visually correct.
• Styling the placeholder with a different font size, then debugging the text rect even though only the placeholder is off.
• Adding a leftView or rightView without reducing the available text width, which causes cramped text and false alignment clues.
• Ignoring Dynamic Type, so larger accessibility fonts clip even though the control looked centered at the default size.

Summary

• Start with contentVerticalAlignment = .center for standard text fields.
• Subclass UITextField and override all three rectangle methods when you need exact control.
• Keep the field height appropriate for the font, especially with Dynamic Type.
• Verify placeholders and accessory views before changing the layout code.
• Treat centering as a combination of alignment, padding, and typography rather than a single property.