Material: tabs: md-center-tabs not paginating correctly

[totomaze]

CodePen and steps to reproduce the issue:

https://codepen.io/anon/pen/zaoKbb
Use the codepen and resize down the windows width (the labels will shrink and when everything is squished the pagination button will appears)
the codepen is a copy of the demo one with "md-center-tabs" and less tabs to start with

Detailed Reproduction Steps:

1. Use the codepen and resize down the windows width (the labels will shrink and when everything is squished the pagination button will appears)

What is the expected behavior?

The pagination will appear as soon as there is no space to show all the labels correctly (same behavior expected as the md-tabs without the "md-center-tabs")

What is the current behavior?

the labels will shrink and when everything is squished the pagination button will appears

What is the use-case or motivation for changing an existing behavior?

Having the labels centered in a dialog box with the correct behavior

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.7
• AngularJS Material: 1.1.9
• OS: Windows 10
• Browsers: chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

The fix is to put back margin: 0 auto in md-pagination-wrapper.md-center-tabs
as it was in the previous version

[Splaktar]

You mention that this was working in a previous version. I tried with 1.1.8 and it seemed to be the same behavior. Which previous version were you using where this worked?

[Splaktar]

I investigated some more and verified that this is a regression in 1.1.5 caused by PR https://github.com/angular/material/pull/9301.

[craigsh]

In 1.1.12 md-center-tabs now works, but pagination doesn't work with md-center-tabs turned on. The tabs shrink with an ellipsis instead. Turning off md-center-tabs makes pagination work when there's not enough space, but the tabs aren't centered.