lightning web component spinner position issue

Question

i am overriding New button with a lightning component which is displayed as Modal. I have added spinner to it. But the spinner comes at very top of the modal. How to bring the modal in middle .

HTML

<template>
    <div class="slds-theme_default">
        <div class="slds-is-relative">
            <template if:true={spinner}>
             <lightning-spinner variant="brand" size="medium"></lightning-spinner>
            </template>
            <template if:true={openmodel}>
                <div class="demo-only">
                    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                        <div class="slds-modal__container">

                            <header class="slds-modal__header">
                                    <button class="slds-button slds -button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                                        <lightning-icon icon-name="utility:close" size="medium">
                                        </lightning-icon>
                                        <span class="slds-assistive-text">Close</span>
                                    </button>
                                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Test</h2>
                            </header>

                            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="height: 50vh;">

                            </div>
                                <footer class="slds-modal__footer">
                                    <lightning-button variant="Neutral" label="Cancel" onclick={closeModal}>
                                    </lightning-button>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <lightning-button variant="brand" label="Save" onclick={redirect}>
                                    </lightning-button>
                                </footer>
                        </div>
                    </section>
                    <div class="slds-backdrop slds-backdrop_open"></div>
                </div>
            </template>
        </div>
    </div>
</template>

JS -

import {
    LightningElement,track,api
} from 'lwc';
import {
    NavigationMixin
} from "lightning/navigation";

export default class Modalspinner extends LightningElement {

    @track spinner = false;
    @api recordId;
    @track openmodel = true;

    redirect() {
        this.spinner = true;
        // eslint-disable-next-line @lwc/lwc/no-async-operation
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.recordId,
                    objectApiName: 'Account',
                    actionName: 'view'
                },
            });
        this.spinner = false;
    }
}

Answer 1

Adding spinner in the center on a Div you need to make a position:relative of a parent div Tag in which spinner is a child element.

In your case first div just below template tag, Replace this

<template>
        <div class="slds-theme_default">

with

<template>
    <div class="slds-theme_default" style="position:relative;">

this will solve your problem.

Answer 2

Try adding the following class to the spinner slds-align_absolute-center. This will align the spinner to the middle of the parent container.