How to `vertical-align:middle` content inside td and th

(Mainly for small screens displays..)
The content text isn't in the middle of the cells

TDs are set by css to:

.table td, .table th {
    padding: 1rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

and THs to:

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

I have currently set this to solve it:

#datatable{

    td, th {
        vertical-align: middle;
    }
}

And I was wondering if there is a better way to do this via datatable js settings...