How do I place an Angular material button at a particular position?

Issue

I want to place the following button at the bottom-center of the mat-grid-tile, how can I do it?

.html file:

<mat-grid-list cols="1" rowHeight="400">
  <mat-grid-tile class="example-grid" >
    <div class="button">
      <button mat-button (click)="getQuestions()" routerLink="questions/getAllQuestions" routerLinkActive="active"><strong>Show!</strong> </button>
    </div>
</mat-grid-tile>
  <mat-grid-tile>...</mat-grid-tile>
</mat-grid-list>

.css file:

.button{
  display: table-cell;
  width: 700px;
  color: rgb(0, 0, 0);

}

Solution

I like to use flexbox utilities for these kinds of things. In your case, you need to first make sure you button div fills the full height/width of the grid tile. Then you can use flexbox to position the content inside the div.

.button {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

Here's a stackblitz demonstrating

Answered By - spots