JSFiddle - React, Tailwind, and code Playground

HTML

How can I center the login box both horizontal and vertical?

Here is my structure:

<div class="container">
<div class="row">
<div class="col s12 m6">
    <div class="card">
        <div class="card-content">
            <span class="card-title black-text">Sign In</span>
            <form>
                <div class="row">
                    <div class="input-field col s12" style="text-align:center">
                        <input placeholder="Placeholder" id="firstname" type="text" class="validate" style="vertical-align:middle">
                        <label for="firstname" class="active">First Name</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12" style="text-align:center">
                        <input placeholder="Placeholder" id="lastname" type="text" class="validate" style="vertical-align:middle">
                        <label for="lastname" class="active">Last Name</label>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-action">
            <input type="submit" class="btn" value="Sign In">
        </div>
    </div>
</div>