CODEWITHSUNDEEP
angularflexboxangular-materialangular-flex-layout
Mathan K A
Mathan K A

Reputation: 115

To center a div to page using flex layout - angular material 2

I want to make a card display in center to the page. When i put the class progress-wizard in a separate div like below.

<div class="progress-wizard" >
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-card>
      <button mat-raised-button color="primary">Primary</button>
    </mat-card>
  </div>
</div>

css:

.progress-wizard {
  height: 90vh!important;
}

In this way, second div not inheriting the parent div height and card is not aligned in center. i would like to know how flex layout works and correct solution for this?

Thanks.

Upvotes: 4

Views: 9090

Answers (3)

Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

fxLayoutAlign for aligin vertically center and fxFill for getting 100% height.

<div class="class" fxLayout fxFill fxLayoutAlign="space-around center">
</div>

Upvotes: 8

Kalpesh Singh
Kalpesh Singh

Reputation: 1717

Flexbox provides a very good solution for vertical centering. In order to show cards in the center of screen, you have to set height equals to viewport height. 

.card-container { 
    height: 100vh;
}


.card-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  background-color: #546e7a;
  color: #fff;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 4px;
}
<div class="card-container">
  <div class="card-content">
  Hey! I'm in the center.
  </div>
</div>

Upvotes: -1

Swavek
Swavek

Reputation: 9

I struggled with it too. so Here is what worked for me. use this class on the div containing your element to be centered. The newest flexLayout doesn't really work that well for centering on a page. The width is a fixed width of the element that will result in all content you want centered to be visible.

.center {
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:350px;
  text-align:center;
  margin: 0 auto;
}

Upvotes: -1

Related Questions