python - How to center a dash graph?

Question

I am trying to center a dash graph. The plot is in a box and even though I changed the height, tried centering the element by using this answer: https://stackoverflow.com/a/1725782 But the graph still shows whitespace like this:

this is the current code that brings this graph I tried increasing the height but it didn't work too.

          html.Div(
                    dcc.Graph(id="backwards", responsive=True),
                    style={
                        "width": "68%",
                        "height": "800px",
                        "display": "inline-block",
                        "border": "3px #5c5c5c solid",
                        "padding-top": "5px",
                        "padding-left": "1px",
                        "overflow": "hidden",
                        "top": "50%",
                        "left": "50%",
                        "margin-top": "-400px"
                    },
                )

plotly layout code

fig.update_layout(
            height=2000,
            width=870,
            hoverlabel={
                "font": {"family": "monospace"},
            },
            template = "plotly_dark",
            font={"family": "monospace", "size": 18},
            
            margin={
                "pad": 0,
                "t": 0,
                "r": 0,
                "l": 0,
                "b": 0,
            },
        )
        fig.update_traces(showlegend=False)

Answer 1

in that answer element will be centered in special sizes

try replace following code with your styles if you want cenralize element with any sizes

style={
    "width": "68vh",
    "height": "800px",
    "display": "inline-block",
    "border": "3px #5c5c5c solid",
    "overflow": "hidden",
    "position": "absolute",
    "top": "50%",
    "left": "50%",
    "transform": "translate(-50%, -50%)"
}

NOTE: you should set height 68vh it same as 68% in this example and it required for transform translate