ag-grid table: Vertical-align: middle

You can use below CSS. No need to use hard-coded values in CSS for height.

.ag-row .ag-cell {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
}

Have a look at this plunk: ag-grid: text-align vertically center


To build on @Paritosh's answer...

You don't have to overwrite the ag-grid styles themselves. You can do something like this in your own stylesheet:

.cell-vertical-align-text-left {
  display: flex!important;
  align-items: center;
}

.cell-vertical-align-text-right {
  display: flex!important;
  flex-direction: row-reverse;
  text-align: right!important;
  align-items: center;
}

Then in your ag-grid column definition use your custom css style in the cellClass property.

var columnDefs = [
  {
    headerName: "Alerts",
    colId: 'invoice_issues',
    editable: false,
    cellClass: "cell-border cell-vertical-align-text-right",
    valueGetter: showInvoiceIssues,
    autoHeight: true,
  }
]

You can set cell style to following

 cellStyle: {
        'height': '100%',
        'display': 'flex ',
        'justify-content': 'center',
        'align-items': 'center ',
      },

it's work for me.