我想使用破折号和plotly在网格表的单元格中将文本居中于图形上方。但我就是想不出怎么做。当前，图形未居中，文本在视图中居中，但在单元格中根本不居中。
这是我目前得到的：image where the text should be centered over the graph, but isn't

Dash app.py文件：

from pydoc import classname
import dash
from dash import dcc, html
import plotly.express as px

external_stylesheets = [
    {
    "playground-styles.css"}
]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

data = {
    "names": ["1", "2", "3"],
    "values": [5.1, 5.7, 6.3],
}

fig_pie = px.pie(data_frame=data, names="names", values="values", title="Pie Chart")
fig_pie.update_traces(
    textinfo="none", sort=False, hovertemplate=None, hoverinfo="skip"
)

fig_pie.update_layout(showlegend=False)
fig_pie.update_layout(margin=dict(l=0, r=0, t=0, b=0))
fig_pie.update_layout(plot_bgcolor="rgba(0,0,0,0)", paper_bgcolor="rgba(0,0,0,0)")

app.layout = html.Table(
    [
        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            [
                                dcc.Graph(
                                        id="pie-chart-table",
                                        config={"displayModeBar": False},
                                        figure=fig_pie,
                                        style={
                                            "width":"30vmin",
                                            "height":"30vmin",
                                        },
                                ),
                            ], className = "svg-container",
                        ),
                        html.Div(
                            [
                                html.Div(
                                    [
                                        "centered over graph",
                                    ], className = "centered-text",
                                ),
                            ], className = "overlay",
                        )

                    ]
                    , className = "grid-item",
                ),
                html.Div(
                    [
                        "grid item 2",
                    ], className = "grid-item",
                ),
                html.Div(
                    [
                        "grid item 3",
                    ], className = "grid-item",
                ),

            ], className="grid-container",
        ),


    ],
    style={
        "width": "100%",
        "border-collapse": "collapse",
    },
)

if __name__ == "__main__":
    app.run_server(debug=True)

字符串

playground-styles.css文件：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100%; /* Set the desired width of the table */
}

.grid-item {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.svg-container {
  width: 30vmin;
  height: 30vmin;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.centered-text {
/* what do I need to put here */
}

型