[SalesForce] SLDS Allignement to the page Center

I'm new to Salesforce, I'm developing the custom login page in LWC.

Below is the code, I'm expection the Form to be in Page Center, Means it should be center in vertically and horizontally. But my below code display in Top center.

  <div class="slds-grid slds-gutters">
        <div class="slds-col">
            <span> </span>
        </div>
        <div class="slds-col">
            <div class="slds-box">
                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="form-element-01">User Name</label>
                    <div class="slds-form-element__control">
                        <input type="text" id="form-element-01" placeholder="Placeholder Text" class="slds-input" />
                    </div>
                </div>
                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="form-element-01">Password</label>
                    <div class="slds-form-element__control">
                        <input type="text" id="form-element-02" placeholder="Placeholder Text" class="slds-input" />
                    </div>
                </div>
                <div class="slds-align_absolute-center" style="height:5rem">
                    <lightning-button type="submit" variant="brand" name="login" label="Login" onclick={handleOnLogin}>
                    </lightning-button>
                </div>
            </div>
        </div>
        <div class="slds-col">
            <span></span>
        </div>
    </div>

enter image description here

Trying to achieve the login page as below. Also is there any utilities class to make the wide input type field like below screenshot.

Can anyone please help me on this.

enter image description here

Best Answer

You must set the height along with slds-align_absolute-center class to align the item in the center.

Also, you cannot use SLDS stretch with a standard button, so you need to create a custom button.

Playground

<div class="slds-grid slds-gutters slds-align_absolute-center" style="height: 100vh">
    <div class="slds-col ">
        <span> </span>
    </div>
    <div class="slds-col slds-medium-size_6-of-12 slds-large-size_4-of-12">
        <div class="slds-box">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-01">User Name</label>
                <div class="slds-form-element__control">
                    <input type="text" id="form-element-01" placeholder="Placeholder Text" class="slds-input" />
                </div>
            </div>
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-01">Password</label>
                <div class="slds-form-element__control">
                    <input type="text" id="form-element-02" placeholder="Placeholder Text" class="slds-input" />
                </div>
            </div>
            <div class="slds-form-element slds-p-top_small">
                <button class="slds-button slds-button_brand slds-button_stretch" type="submit" label="Login" onclick={handleOnLogin}>Login</button>
            </div>
        </div>
    </div>
    <div class="slds-col">
        <span></span>
    </div>
</div>
Related Topic