How to Center Widgets in a Flutter Column

Updated 14 November 2026 · Standard formula, shown below

This guide shows you how to center widgets inside a Flutter Column both horizontally and vertically. You’ll learn the exact properties and code patterns to use, plus common pitfalls and troubleshooting tips. No prior Flutter experience beyond a basic widget setup is required.

What You’ll Need

A Flutter project set up (you can use flutter create to make one).
A basic understanding of Flutter widgets and the Column widget.
An editor like VS Code or Android Studio with Flutter extensions installed.

Step-by-Step

Create a Column widget. Start with a simple Column inside your widget tree. For example, inside a Scaffold body, add a Column with a few child widgets like Text or Icon.
Set mainAxisAlignment to center. The mainAxisAlignment property controls vertical alignment in a Column (since the main axis is vertical). Add mainAxisAlignment: MainAxisAlignment.center to the Column’s constructor to center children vertically.
Set crossAxisAlignment to center. The crossAxisAlignment property controls horizontal alignment in a Column (the cross axis is horizontal). Add crossAxisAlignment: CrossAxisAlignment.center to center children horizontally.
Ensure the Column has a bounded height. For vertical centering to work, the Column must have a finite height. If the Column is inside a body, it naturally fills the available space. If it’s inside a Container or Padding, make sure the parent gives it a height constraint (e.g., using height: double.infinity or a fixed height).
Test with a minimal example. Run your app and verify that the children appear centered both horizontally and vertically. If not, check the parent constraints as described in Troubleshooting.

Common Mistakes

Forgetting to set both alignment properties. Setting only mainAxisAlignment centers vertically but leaves children left-aligned horizontally. You need both.
Using a Column inside a Row without proper constraints. If the Column is inside a Row, the Row may give it unbounded width, causing horizontal centering to fail.
Applying alignment to the wrong axis. In a Column, mainAxisAlignment is vertical, not horizontal. Many beginners confuse it with Row.
Using Center unnecessarily. Wrapping the Column in a Center widget can work, but it’s redundant if you set the alignment properties correctly and may cause layout issues if the Column has unbounded constraints.

Tips

Use Expanded or Flexible for dynamic children. If you have a child that should take remaining space, wrap it in Expanded or Flexible to avoid overflow errors.
Check the parent’s alignment. If the Column is the only child of a Container, you can also set alignment: Alignment.center on the Container to center the Column itself, but that’s a different effect.
Use Spacer for flexible spacing. Instead of centering, you can use Spacer widgets to push children to the center or to specific positions.
Test with different screen sizes. Centering works across devices, but ensure your Column’s height constraint is flexible enough to avoid overflow on small screens.

Troubleshooting

Children are centered vertically but not horizontally. This means crossAxisAlignment is not set or is set to start. Add crossAxisAlignment: CrossAxisAlignment.center to the Column.

Children are centered horizontally but not vertically. Check that mainAxisAlignment is set to center and that the Column has a bounded height. If the Column is inside a SingleChildScrollView, it gets unbounded height, so vertical centering won’t work. Instead, use a ConstrainedBox with a fixed height or use LayoutBuilder to get the viewport height.

You get a “RenderFlex overflowed” error. This happens when the Column’s children exceed the available space. Reduce the number of children, use Flexible or Expanded to allow them to shrink, or remove fixed sizes from children.

The Column takes up the full width but children are not centered. If the Column is inside a Row, the Row may stretch the Column horizontally. Set crossAxisAlignment: CrossAxisAlignment.center on the Row, or wrap the Column in a Center widget.

Centering works but only on some screens. If you use a fixed height for the Column, it may not fill the screen on larger devices. Use height: double.infinity or MediaQuery.of(context).size.height to make it responsive.

Frequently Asked Questions

What is the difference between mainAxisAlignment and crossAxisAlignment in a Column?

In a Column, the main axis is vertical, so mainAxisAlignment controls vertical alignment. The cross axis is horizontal, so crossAxisAlignment controls horizontal alignment.

Can I center a single widget in a Column without setting both properties?

Yes, you can wrap the widget in a Center widget, but that centers it relative to the Column’s bounds, which may not be what you want if the Column has multiple children.

Why does my Column not center vertically when I use `mainAxisAlignment: center`?

This usually happens because the Column’s height is unbounded (e.g., inside a scroll view) or the Column is not taking the full available height. Ensure the Column has a bounded height by giving its parent a fixed height or using Expanded.

How do I center a Column inside a Container?

You can set the Container’s alignment property to Alignment.center, which centers the Column within the Container. Alternatively, set the Column’s alignment properties and give the Container a fixed size.

What if I want to center only some children in a Column?

You can wrap the specific children in a Center widget or a Row with mainAxisAlignment: center to center them individually, while keeping other children aligned differently.

Does centering work the same way in a Row?

No, in a Row the main axis is horizontal, so mainAxisAlignment controls horizontal alignment, and crossAxisAlignment controls vertical alignment. The logic is swapped compared to a Column.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.