SharePoint Column JSON formatting alignment

Question

As mentioned in the Title I have some issues with trying to align my background color formatting as shown in the screenshot below:

What I hope to do is to get the BACKGROUND COLOR to align WITHOUT causing the words to move upwards as shown in the 2nd screenshot below:

Below is the code that I am currently using:

{
  "elmType": "div",
  "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
  "attributes": {},
  "style": {
    "display": "table-cell",
    "text-align": "center",
    "vertical-align": "middle",
    "background-color": {
      "operator": "?",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            "Approved"
          ]
        },
        "#ABDB77",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$FlowStatus]",
                "Expired"
              ]
            },
            "#FF6347",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Pending"
                  ]
                },
                "#FFD700",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Rejected"
                      ]
                    },
                    "#bcbcbc",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "customRowAction": {},
  "children": []
}

Thank you in advance for any help!

Suggestions are welcomed too.

UPDATE I've tried the updated code provided by one of the suggestions and below are the results.

It's close to my intended outcome now except the text's vertical alignment is still off (on top instead of middle)

UPDATE 2: Thanks to the suggestions, I had an idea which surprisingly worked. Below is the code and screenshot for those who might face the same issue. It's quite a long approach but it works.

{
    "elmType": "div",
    "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
    "attributes": {},
    "style": {
      "border-radius": "0em",
       "height": "0",
       "min-width": "0em",
       "color": "black",
       "text-align": "center",
       "position": "left",
       "top": "0",
       "right": "0em",
      "background-color": {
        "operator": "?",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "@currentField",
              "Approved"
            ]
          },
          "#ABDB77",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$FlowStatus]",
                  "Expired"
                ]
              },
              "#FF6347",
              {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@currentField",
                      "Pending"
                    ]
                  },
                  "#FFD700",
                  {
                    "operator": "?",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "@currentField",
                          "Rejected"
                        ]
                      },
                      "#bcbcbc",
                      ""
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    "customRowAction": {},
    "children": []
  }

Answer 1

If you want the div with full width then try adding "width": "100%" to the style attribute, like:

{
  "elmType": "div",
  "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
  "attributes": {},
  "style": {
    "width": "100%",
    "display": "table-cell",
    "text-align": "center",
    "vertical-align": "middle",
    "background-color": {
      "operator": "?",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            "Approved"
          ]
        },
        "#ABDB77",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$FlowStatus]",
                "Expired"
              ]
            },
            "#FF6347",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Pending"
                  ]
                },
                "#FFD700",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Rejected"
                      ]
                    },
                    "#bcbcbc",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "customRowAction": {},
  "children": []
}

Update:

Also, you can try adding padding to your div by removing display attribute as given below:

{
    "elmType": "div",
    "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
    "attributes": {},
    "style": {
      "padding": "0 25%",
      "display": "flex",
      "text-align": "center",
      "vertical-align": "middle",
      "background-color": {
        "operator": "?",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "@currentField",
              "Approved"
            ]
          },
          "#ABDB77",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$FlowStatus]",
                  "Expired"
                ]
              },
              "#FF6347",
              {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@currentField",
                      "Pending"
                    ]
                  },
                  "#FFD700",
                  {
                    "operator": "?",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "@currentField",
                          "Rejected"
                        ]
                      },
                      "#bcbcbc",
                      ""
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    "customRowAction": {},
    "children": []
  }

Answer 2

If the bg color is not priority then you can use SharePoint's default class which is created to format column, check following link for default css class and JSON examples:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style-guidelines

Following JSON I am using in my columns:

{ 
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",  "attributes": {
"class": "=if(@currentField == true, 'sp-field-severity--good', 'sp-field-severity--blocked') + ' ms-fontColor-neutralSecondary'"
},
"children": [
{
  "elmType": "span",
  "style": {
    "display": "inline-block",
    "padding": "0 4px"
  },
  "attributes": {
    "iconName": "=if(@currentField == true, 'CheckMark', 'ErrorBadge')"
  }
},
{
  "elmType": "span",
  "txtContent": "=if(@currentField == true, 'Yes', 'No')"
}
  ]
}