Bootstrap : Vertically center row in container [duplicate] - html

Question

This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 3 years ago.
i'm trying to vertically center a row which contains a card, I tried all solutions in this question's solution Vertical Align Center in Bootstrap 4
but absolutely nothing happens.
Here is my html code :
<div class="row h-100">
<mat-progress-spinner id="loader" style="top: 50%; left: 47%; transform: translate(-50%, -50%); position:absolute; z-index: 1;" *ngIf="showLoading"
[color]="color"
[mode]="mode">
</mat-progress-spinner>
<div class="col-sm-12 my-auto">
<div *ngIf="app" class="card card-block shadow text-center mx-auto">
<div class="card-header">
<h1>{{app.name | uppercase}}</h1>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Micro Service</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
<th scope="col">Settings</th>
</tr>
<tbody>
<tr *ngFor="let ms of app.microservices">
<td style="width: 25%" class="align-middle" id="msname">{{ms.name}}</td>
<td style="width: 25%" class="align-middle">
<img *ngIf="(isContainerRunning | async)" src="../../../assets/img/running.png" width="50px" height="50px" matTooltipPosition="right" matTooltip="Running">
<img *ngIf="!(isContainerRunning | async)" src="../../../assets/img/exited.png" width="50px" height="50px" matTooltipPosition="right" matTooltip="Exited">
</td>
<td style="width: 25%" class="align-middle">
<a (click)="start(ms.name)"><img src="../../../assets/img/start.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
<a (click)="stop(ms.name)"><img src="../../../assets/img/stop.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
<a (click)="restart(ms.name)"><img src="../../../assets/img/restart.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
</td>
<td style="width: 25%" class="align-middle">
<button (click)="redirect(ms_url)" id="backbtn">edit</button>
</td>
</tr>
<tr>
<td colspan="4" class="text-center align-middle"><button (click)="back()" id="backbtn">back</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
ps : this is an angular project so the container is in another component here is the container tag :
<div class="container-fluid h-100">
<div [#routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
</div>
It seems like "my-auto" and every single other solutions has no impact on my card position.
EDIT :
i'm using angular material sidenav which is configured in main app.component.html like, not sure if it changes anything tho :
<mat-sidenav-container>
<mat-sidenav mode="side" opened (mouseenter)="toggleMenu()" (mouseleave)="toggleMenu()">
<table class="w-100 mx-auto text-center">
<tr>
<td>
<img src="../assets/img/logo.png" width="60px" class="py-2 px-2 my-3" id="logoaxians">
</td>
</tr>
<tr>
<td>
<a routerLink="/applications" routerLinkActive="active" matTooltipPosition="right" matTooltip="Applications"><img src="../assets/img/dashboard.png" width="43px" class="py-2 px-2 icons"></a>
</td>
</tr>
</table>
<table class="w-100 mx-auto text-center" id="bottomnav">
<tr>
<td>
<a routerLink="/help" routerLinkActive="active" mat-raised-button matTooltipPosition="right" matTooltip="Help"><img src="../assets/img/help.png" width="50px" class="py-2 px-2 icons"></a>
</td>
</tr>
</table>
</mat-sidenav>
<mat-sidenav-content>
<div class="container-fluid vh-100">
<div [#routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
Thanks for your help.

Answer 1

try this :
<div class="container-fluid h-100">
<div [#routeAnimations]="prepareRoute(outlet)" class="h-100">
<router-outlet #outlet="outlet"></router-outlet>
</div>
</div>