`Phaser.Display.Align.In.Center` works well with the first line of my text but doesn't center my 2nd line. How do I fix it?

var game = new Phaser.Game({
  width: 320, height: 200,
  scene: {
    create: create
  }
});
function create() {
  let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
  let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec', { align: 'center' });
  Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

var game = new Phaser.Game({
  width: 320, height: 200,
  scene: {
    create: create
  }
});
function create() {
  let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
  let noti_txt1 = this.add.text(0, 0, 'Magic is not ready yet');
  let noti_txt2 = this.add.text(0, 0, 'wait a sec');

  // extra visual effect
  this.tweens.add({
    targets: noti_txt2 ,
    alpha: 0,
    ease: 'Power1',
    duration: 1000,
    yoyo: true,
    repeat: -1,
  });
  Phaser.Display.Align.In.Center(noti_txt1, noti_bg);
  // Just adding a minor horizontal offset
  Phaser.Display.Align.To.BottomCenter(noti_txt2, noti_txt1, 0, 10);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>