How to Center Items in a Jetpack Compose Column

By the end of this page, you will understand how alignment works in a Jetpack Compose Column, how to center children horizontally or vertically, and which parameters to use for common layout cases.

In Jetpack Compose, a Column places its children vertically, one below another. Because of that, there are two different directions to think about:

• Main axis: vertical direction
• Cross axis: horizontal direction

This matters because centering depends on which axis you want to center on.

For a Column:

• Use horizontalAlignment to align children left, center, or right horizontally.
• Use verticalArrangement to control how children are placed top, center, bottom, or spaced vertically.

If you want text items in a Column to appear centered like a typical "gravity center" layout, you often need one or both of these:

horizontalAlignment = Alignment.CenterHorizontally
verticalArrangement = Arrangement.Center

A very important detail is that vertical centering only works if the Column has extra height available. If the Column is only as tall as its children, there is no empty space to center within.

That is why developers often combine centering with modifiers like:

Modifier.fillMaxWidth()
Modifier.fillMaxSize()

Understanding axis-based alignment is essential in Compose because layout code is built around these rules. Once you understand them, you can control placement precisely in Column, Row, and Box.

Think of a Column like a stack of papers placed from top to bottom on a table.

• horizontalAlignment decides whether each paper is placed on the left, center, or right of the table.
• verticalArrangement decides whether the whole stack starts at the top, sits in the middle, or stays at the bottom.

So if your Text elements are stacked in a Column:

• Want each line centered left-to-right? Use horizontalAlignment.
• Want the whole group centered top-to-bottom? Use verticalArrangement.
• Want both? Use both settings together.

This is similar to the old idea of "gravity," but Compose expresses it more explicitly through alignment and arrangement.

The core syntax for centering items in a Column is:

Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = item.title)
    Text(text = item.description)
}

This centers the children horizontally inside the Column.

Center horizontally

Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Title")
    Text("Description")
}

Explanation:

• fillMaxWidth() gives the Column the full available width.
• horizontalAlignment = Alignment.CenterHorizontally centers each child in that width.

Center vertically and horizontally

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Text("Title")
    Text("Description")
}

Explanation:

• fillMaxSize() gives the Column full width and height.
• horizontalAlignment centers the items left-to-right.
• verticalArrangement = Arrangement.Center centers the group top-to-bottom.

Center one child only

If you only want a specific child centered, you can use Modifier.align(...) on that child:

Column(modifier = Modifier.fillMaxWidth()) {
    Text(
        text = "Centered title",
        modifier = Modifier.align(Alignment.CenterHorizontally)
    )
    Text(text = "Not centered")
}

This is useful when not all children should have the same alignment.

Consider this example:

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Text("Hello")
    Text("World")
}

Here is what happens step by step:

1. Modifier.fillMaxSize() makes the Column take the full available screen space.
2. The Column decides to place children vertically, because that is what a Column does.
3. verticalArrangement = Arrangement.Center tells the Column to place the whole group of children in the vertical middle of its available height.
4. horizontalAlignment = Alignment.CenterHorizontally tells the Column to place each child in the horizontal middle of its available width.
5. Text("Hello") is measured and positioned.
6. Text("World") is measured and positioned below Hello.
7. The two Text items appear as a vertically stacked group centered on the screen.

If you remove fillMaxSize(), vertical centering may no longer be visible, because the Column might shrink to fit its contents.

Centering in a Column is common in many Android screens:

• Empty states
  • Example: "No messages yet" with a subtitle centered in the middle of the screen.
• Loading screens
  • A spinner and message like "Loading data..." centered vertically and horizontally.
• Login or welcome screens
  • Title and description centered for a clean visual layout.
• Error screens
  • A message and retry hint shown in the middle of the page.
• Cards and dialogs
  • Text inside a narrow column centered for readability.

Example empty state:

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Text("No items found")
    Text("Try changing your filters")
}

In real projects, developers usually combine Column alignment with modifiers and conditional UI patterns.

Common patterns

• Screen-level centering
  • Use fillMaxSize() with both horizontalAlignment and verticalArrangement.
• Section-level centering
  • Use fillMaxWidth() with horizontalAlignment only.
• Child-specific alignment
  • Use Modifier.align(Alignment.CenterHorizontally) for one item.
• Guarded UI states
  • Show a centered Column for loading, error, or empty states.

Example with UI state:

if (items.isEmpty()) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("No data available")
        Text("Pull to refresh")
    }
}

Why this matters in real code

Compose layouts are often nested. A Column may be inside a Box, Scaffold, or another layout. In those cases, centering only works as expected if the parent allows enough space.

For example, if a parent gives the Column only wrap-content size, Arrangement.Center will not visually change much. Developers often fix this by applying the correct size modifier at the right level.

Here are common beginner mistakes when centering items in a Column.

1. Forgetting to give the Column enough width

Broken example:

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Title")
    Text("Description")
}

Problem:

• The Column may only be as wide as its content.
• There is no extra horizontal space to center within.

Fix:

Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Title")
    Text("Description")
}

2. Expecting vertical centering without height

Broken example:

Column(
    verticalArrangement = Arrangement.Center
) {
    Text("Title")
    Text("Description")
}

Problem:

• If the Column wraps its content height, there is no extra vertical space.

Fix:

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center
) {
    Text("Title")
    Text("Description")
}

3. Mixing up axis directions

For a Column:

• horizontalAlignment affects children left-to-right.
• verticalArrangement affects children top-to-bottom.

Beginners often expect horizontalAlignment to center the whole block vertically, which it does not.

4. Using child alignment when parent alignment is simpler

This works:

Column(modifier = Modifier.fillMaxWidth()) {
    Text("Title", modifier = Modifier.align(Alignment.CenterHorizontally))
    Text("Description", modifier = Modifier.align(Alignment.CenterHorizontally))
}

But if all children should be centered, this is cleaner:

Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Title")
    Text("Description")
}

Here is how the main alignment options compare in a Column.

Column vs Row

This difference is important. In a Row, the alignment property names change because the main axis changes.

// Center children horizontally in a Column
Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
) { ... }

// Center children vertically and horizontally
Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) { ... }

// Center only one child
Text(
    "Hello",
    modifier = Modifier.align(Alignment.CenterHorizontally)
)

Rules to remember

• Column stacks children vertically.
• horizontalAlignment controls child alignment left-to-right.
• verticalArrangement controls placement top-to-bottom.
• Vertical centering needs available height.
• Horizontal centering usually needs fillMaxWidth().
• Use Modifier.align(...) for per-child alignment.

Quick answer for this case

Column(
    modifier = Modifier.fillMaxWidth(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(text = item.title)
    Text(text = item.description)
}

How do I center text inside a Jetpack Compose Column?

Use horizontalAlignment = Alignment.CenterHorizontally on the Column, and usually add Modifier.fillMaxWidth().

Why is Arrangement.Center not working in my Column?

Because the Column may not have extra height. Add Modifier.fillMaxHeight() or Modifier.fillMaxSize().

What is the difference between horizontalAlignment and verticalArrangement in a Column?

horizontalAlignment centers each child left-to-right. verticalArrangement centers or spaces the group top-to-bottom.

How do I center only one item in a Column?

Use Modifier.align(Alignment.CenterHorizontally) on that specific child.

Is gravity used in Jetpack Compose like in XML layouts?

Not directly. Compose uses alignment and arrangement parameters instead of the old XML gravity style.

Should I use fillMaxWidth() or fillMaxSize()?

Use fillMaxWidth() when you only need horizontal centering. Use fillMaxSize() when you also want vertical centering across the whole available area.

• Row — Similar layout container, but arranges children horizontally.
• Box — Useful when you want to stack content or center a single child easily.
• Modifier — Controls size, alignment, padding, and other layout behavior.
• Alignment — Defines how content is positioned within available space.
• Arrangement — Defines how multiple children are distributed along the main axis.
• fillMaxWidth — Gives a composable the full available width, often needed for visible centering.
• fillMaxSize — Gives full width and height, useful for full-screen centering.