How to customize mdToast (to center)

Question

Angular Material mdToast service documentation shows the position can be any combination of 'bottom', 'left', 'top', 'right', 'fit'. How do I customize the toast to show at 'top center' position? what is this 'fit' option for? changing the demo code to below did not help

 $mdToast.simple()
        .content('Simple Toast!')
        .position('fit') 
        .hideDelay(3000)

Answer 1

if you want to center the toast just add

md-toast.md-top {
    left: 50%;
    margin-left: -150px;
}

to your CSS and you are all set. -150 is half the width of my toast