align pagination to bottom-center

Question

I'm trying to put my pagination in the bottom-center of the page. I', using angular material mat-paginator.

this is the result right now:

1:

2:

as you can see the paginator now is going above my mat-accordion and its not going down with the flow of the page, and its on the left side instead of the center.

this is my code: html:

<mat-spinner *ngIf="isLoading"></mat-spinner>
<mat-accordion multi="true" *ngIf="posts.length > 0 && !isLoading">
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      {{ post.title }}
    </mat-expansion-panel-header>
    <p>{{ post.content }}</p>
    <div class="post-image">
      <img [src]="post.imagePath" [alt]="post.title">
    </div>
    <mat-action-row>
      <a mat-button color="primary" (click)="onEdit(post.id)">EDIT</a>
      <button mat-button color="warn" (click)="onDelete(post.id)">DELETE</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>
<div class="mat-page">
  <mat-paginator [length]="totalPosts" [pageSize]="PostsPerPage" [pageSizeOptions]="pageSizeOptions" (page)="onChangePage($event)"
    *ngIf="posts.length > 0 "></mat-paginator>
</div>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0 && !isLoading">No posts added yet!</p>

css:

:host {
  display: block;
  margin-top: 1rem;
}

.info-text {
  text-align: center;
}

.post-image {
  width: 50%;
}

.post-image img {
  width: 100%;
  border: 2px solid rgb(202, 202, 202);
}

mat-paginator {
  position: absolute;
  bottom: 0;
  text-align: center;
  margin: 0 auto;
}

thanks by heart

Update: That is the result right now:

css:

:host {
  display: block;
  margin-top: 1rem;
}

.info-text {
  text-align: center;
}

.post-image {
  width: 50%;
}

.post-image img {
  width: 100%;
  border: 2px solid rgb(202, 202, 202);
}

mat-paginator {
  display: flex;
  justify-content: center;
}

my question now is how can I set the pagination to be in the bottom a default?

Angular HTML Template

<mat-paginator
  *ngIf="totalRecords"
  [length]="totalRecords"
  [pageSize]="pageSize"
  [pageIndex]="0"
  [pageSizeOptions]="pageSizeOptions"
  [showFirstLastButtons]="true"
  (page)="setPagination($event)">
</mat-paginator>

CSS/SCSS

All you need to do is override the mat-paginator class to have display: flex; and justify-content values that blend into the inherited styles from Angular Material.

.mat-paginator {
  display: flex;
  justify-content: center;
} 

Comments

[Hana Wujira]

try setting left:50% in mat-paginator class

[João Deroldo]

try with left: 50%; translateX(-50%); it will probably center ir middle

[Mehraj Khan]

@hindi1991 You can also use display: flex; align-item: center

[rio]

well mat-paginator { display: flex; justify-content: center; } did the trick for me. but still how can I put in in the bottom all the time? even if the accordion is open/close?

[rio]

@MerajKhan how do I set it to bottom? and not override any other div?