FabButton in the middle of something?

I want to implement a Fab button in the middle of ion-card, is it any way to do this?

This doesn’t seem very descriptive but you can easily overwrite the fab button position using the top, right, bottom or left css rules.


.my-ion-fab {
top: 20% !important;

Just make sure to apply that class to your ion-fab

you can simply apply the center attribute on the fab btn


<ion-fab bottom center >
    <button ion-fab fab-fixed>
      <ion-icon name="add" is-active="false"></ion-icon>

it will move it to the bottom of the page and i want to move fab in the middle of ion-card

and making my own css styling wont work when someone turn the screen in landscape mode

I don’t understand this to be honest. If you have the ion-fab nested within the ion-card then it will stay contained within that card. If you set its position to 5% left and 5% top, rotating the device would make it resize correctly. Can you provide a better example? Maybe a codepen demonstrating it?

Here comes the code:

      <ion-fab center middle>
        <button ion-fab [color]="apple'"><ion-icon [name]="play'"></ion-icon></button>
      <canvas #doughnutCanvas></canvas>

And FAB is getting assigned according to window size during the portrait mode, not ion-card. Using this css:

    ion-fab[middle] {
      top: 30%;
    ion-fab[center] {
      left: 50%;

During the landscape mode its position is very top of the screen

1 Like