title: How to center vertically and horizontally a heading text using dash-bootstrap
body: <p>I'm using <a href="https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout" rel="nofollow noreferrer">Bootstrap dash layout</a> for my web application layout. But instead of having the text at the top of the page, I wish the text will be in the red area. How can I achieve it?</p>
  
  <p><a href="https://i.stack.imgur.com/RcNhy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RcNhy.png" alt="Text in the red area"></a></p>
  
  <p>I've tried using <code>"align":"center" and "justify":"center"</code> but nothing helps</p>
  
  <pre><code>import dash_bootstrap_components as dbc 
  import dash_html_components as html 
  import dash
  
  body = dbc.Container([ 
  dbc.Row(
              [
              html.H1("test")
              ], justify="center", align="center"
              )
  ]
  
  )
  
  app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])
  
  app.layout = html.Div([body])
  
  if __name__ == "__main__":
      app.run_server(debug=True)
  </code></pre>
  
  <p>Understand there is some workaround using <a href="https://stackoverflow.com/questions/38555814/how-to-center-vertically-and-horizontally-a-heading-text-using-flask-bootstrap">flask-bootstrap</a> but how do I do the same using dash-plotly-booststrap?</p>