I have a dash bootstrap card and I want to align it in the center of the page.
Now I am lowering it with html.Div([], style={'margin-top':150}), but it is a hell of a job to do this for multiple pages with different card sizes. My code:
not_found = dbc.Card(
[
dbc.CardBody(
[
html.Div("404: The page you are looking for is not found."),
html.Br(),
]
)
],
color="dark", outline=True, body=True, style={"width": "27rem"}
)
layout_not_found = html.Div([
dbc.Row(
[
dbc.Col(not_found, width={'size': 3, 'offset': 0}),
], justify='around',
)
], style={'margin-top': 150})
What is the best way to get a card in the center of the layout?
You must specify the parent height, otherwise you won’t be able to center vertically. Please refer to the great dbc documentation for more info on how to use the BS grid system.
I tried with different justify and align parameters, but the card will remain at the top of the page.
I have found a workaround for not starting at the top of the page. That is by simply adding a navbar. This includes a standard spacing and, although not centred, the esthetic looks much better!