jQuery .css() not affecting a div

For an app I am working on, I recently implemented an overlay that absorbs user input. Of course, that was only one of my objectives - I also need to center the popover that lives 'inside' this overlay.

Here's my setup so far:

Markup

<!-- snip extra HTML -->

<div id='some-overlay' class='input-eater hidden'>
  <div id='some-prompt' class='overlay dialogue'>
    This is a message that should be hidden.<br /><br />
    <a href='javascript: $('#some-overlay').fadeOut();'>Click Here To Close</a>
  </div>
</div>

<!-- ...SNIP... -->

...Some action on the background page causes #some-overlay to fade in, and thus occlude the page until the close action happens. This is the offending JavaScript:

<!-- ...Continued from the markup above... -->
<script>
var $button = $('.some-element'),
    $overlay = $('#some-overlay'),
    $prompt = $('#some-prompt');

$(document).ready(function () {
  $button.click(function(e) {
    e.preventDefault();

    var args = {
      // ...snip.  Unnecessary.
    };

    $.get('Home/SomeAction', args, function(result) {
      // Some processing...

      // !!!! This is the failing code... !!!!
      $prompt.css({
        'left': (window.width - $prompt.width()) / 2,
        'top': (window.height - $prompt.height()) / 2
      });
    });
  });
});
</script>

Styling

.input-eater {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, 0.5);
}

.overlay {
  position: absolute;
  z-index: 1;
}

.dialogue {
  box-sizing: border-box;
  // Other platform-specific variants also included.
  // Cosmetic attributes such as box-shadow, background color, etc. also set.
}

As noted in the script section above, the $.css() call is failing to reposition the prompt that lives inside the overlay. It should be centering vertically and horizontally, yet it is staying in the top-left corner of the page.

Question: What am I doing wrong, that is preventing the overlay from centering?