For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.
Reflex Logo
Docs Logo
Library

/

Layout

/

Center

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!

API Reference

rx.center

A center component.

Card 1
Card 2
Card 3
rx.center(
rx.card("Card 1", size="2"),
rx.card("Card 2", size="2"),
rx.card("Card 3", size="2"),
gap="0.75rem",
width="100%",
height="10rem",
border_radius="0.5rem",
direction="row",
)
direction

Props

PropTypeDescription
access_key
str

Provides a hint for generating a keyboard shortcut for the current element.

auto_capitalize
"off""none""on""sentences""words""characters"

Controls whether and how text input is automatically capitalized as it is entered/edited by the user.

content_editable
"inherit""plaintext-only"

Indicates whether the element's content is editable.

context_menu
str

Defines the ID of a <menu> element which will serve as the element's context menu.

dir
str

Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).

draggable
bool

Defines whether the element can be dragged.

enter_key_hint
"enter""done""go""next""previous""search""send"

Hints what media types the media element is able to play.

hidden
bool

Defines whether the element is hidden.

input_mode
"none""text""tel""url""email""numeric""decimal""search"

Defines the type of the element.

item_prop
str

Defines the name of the element for metadata purposes.

lang
str

Defines the language used in the element.

role
"alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem"

Defines the role of the element.

slot
str

Assigns a slot in a shadow DOM shadow tree to an element.

spell_check
bool

Defines whether the element may be checked for spelling errors.

tab_index
int

Defines the position of the current element in the tabbing order.

title
str

Defines a tooltip for the element.

as_child
bool

Change the default rendered element for the one passed as a child, merging their props and behavior.

direction
"row""column""row-reverse""column-reverse"

How child items are laid out: "row" | "column" | "row-reverse" | "column-reverse".

align
"start""center""end""baseline""stretch"

Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch".

justify
"start""center""end""between"

Alignment of children along the cross axis: "start" | "center" | "end" | "between".

wrap
"nowrap""wrap""wrap-reverse"

Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse".

spacing
"0""1""2""3""4""5""6""7""8""9"

Gap between children: "0" - "9".

Built with Reflex