选择后如何使汉堡菜单居中？

Question

我的网络应用程序中有一个汉堡菜单，当您单击它时，蓝色框显然没有正确围绕菜单图标居中。有人知道如何解决此问题吗？

html

 <mat-toolbar color="primary" class="header-box-shadow">
  <button mat-icon-button (click)="navigation.toggle()" fxShow.sm="true" fxShow.gt-sm="true">
    <mat-icon>menu</mat-icon>
  </button>

css

.header-box-shadow {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 
  rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
  justify-content: center;
 }