ag-grid-vue: center column content

Question

Versions:

Vue: 3.0.0
ag-grid-community: 26.1.0
ag-grid-vue3: 26.1.2
Chrome: 95.0.4638.54 (Official Build) (x86_64)

How can I center content under a single column?

Note that I've tried various solutions; all failed. I list code below. Here are cases I've tried out.

Try something similar to rightAligned.

The docs describe how to configure columns to right-align numbers. IE:

      columnDefs: [
        { headerName: "Sample ID", field: "sampleId", sortable: true, checkboxSelection: true, type: 'rightAligned' },
        .
        .
        .
      ],

Intuitively, I would guess that leftAligned and centerAligned would have a similar affect on horizontal alignment of cell content. Nope. That is not documented and evidently not supported.

Try cellClass.

I then tried setting up a custom class, and tried styling suitable for plain inbox content as well as flex-bound content:

      columnDefs: [
        { headerName: "Sample ID", field: "sampleId", sortable: true, checkboxSelection: true, cellClass: 'grid-cell-centered' },
        .
        .
        .
      ],

with:

  .grid-cell-centered {
    justify-content: center;
  }

or with:

  .grid-cell-centered {
    text-align: center;
  }

Nope. That doesn't work either.

Try built-in style supplied with ag-grid.

I successfully centered column header labels using one of the built-in styles:

  .ag-header-cell-label {
    justify-content: center;
  }

In hopes of getting similar behavior for content cells, I then tried this:

  .ag-header-cell-text {
    justify-content: center;
  }

Nope. That does not work either.

How can we center an entire column? Here's my setup:

<template>
  <ag-grid-vue style="height: 500px; width: 75%;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    rowSelection="multiple">
  </ag-grid-vue>
</template>

<script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";

export default {
  name: "CenterColumnContent",
  components: {
    AgGridVue,
  },
  setup() {
    return {
      columnDefs: [
        { headerName: "Sample ID", field: "sampleId", sortable: true, checkboxSelection: true, cellClass: 'grid-cell-centered' },
        .
        .
        .
      ],
      rowData: [
        { sampleId: "1" },
        .
        .
        .
      ],
    };
  },
};
</script>

<style lang="scss">
  @import "~ag-grid-community/dist/styles/ag-grid.css";
  @import "~ag-grid-community/dist/styles/ag-theme-alpine.css";

  .ag-header-cell-label {
    justify-content: center;
  }

  .grid-cell-centered {
    justify-content: center;
  }
</style>