Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Layout

/

Center

Center is a component that centers its children within itself. It is based on the flex component and therefore inherits all of its props.

Hello World!

rx.center(
    rx.text("Hello World!"),
    border_radius="15px",
    border_width="thick",
    width="50%",
)

API Reference

Center

A center component.

Test

Prop	Type	Description
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior.
`direction`	Literal	How child items are layed out: "row" \| "column" \| "row-reverse" \| "column-reverse"
`align`	Literal	Alignment of children along the main axis: "start" \| "center" \| "end" \| "baseline" \| "stretch"
`justify`	Literal	Alignment of children along the cross axis: "start" \| "center" \| "end" \| "between"
`wrap`	Literal	Whether children should wrap when they reach the end of their container: "nowrap" \| "wrap" \| "wrap-reverse"
`spacing`	Literal	Gap between children: "0" - "9"

Did you find this useful?

No

Yes

Center

API Reference

Center