Dash应用justify="center"不生效，如何实现标题居中？

你当前代码里，dbc.Row的justify="center"是控制**列（Col）**在行内的水平对齐，但直接把html.H1放在Row里，它不是Col组件，所以这个属性不会生效。以下两种方法可以解决标题居中问题：

方法1：给标题添加文本居中类 #

直接给html.H1加上Bootstrap的text-center类，让标题文本本身居中：

my_simple_app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

my_simple_app.layout = html.Div(
    children=[
        # First row with title
        dbc.Row(html.H1("This part should center", className="text-center"), align="center", className="h-50"),

        # Thematic break
        html.Hr(),

        # Second row
        dbc.Row(children=[
            # First column: dropdown
            dbc.Col(html.Span("It will be my dropdown"), width=3),
            # Second column: graph
            dbc.Col(html.Span("It will be my graph"), width=9)
        ])
    ])

if __name__ == "__main__":
    my_simple_app.run_server()

方法2：用Col包裹标题后让Row控制居中 #

把标题放在dbc.Col中，再通过Row的justify="center"控制列的位置，符合Dash Bootstrap Components的布局逻辑：

my_simple_app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

my_simple_app.layout = html.Div(
    children=[
        # First row with title
        dbc.Row(
            dbc.Col(html.H1("This part should center"), width="auto"),
            justify="center", 
            align="center", 
            className="h-50"
        ),

        # Thematic break
        html.Hr(),

        # Second row
        dbc.Row(children=[
            # First column: dropdown
            dbc.Col(html.Span("It will be my dropdown"), width=3),
            # Second column: graph
            dbc.Col(html.Span("It will be my graph"), width=9)
        ])
    ])

if __name__ == "__main__":
    my_simple_app.run_server()

内容的提问来源于stack exchange，提问作者Rander