Center align a contact form on page with side by side text and input fields? [UPDATED]

EDIT: I have updated both the CSS and the html. I have figured out the centering, but am still having trouble with the alignment of labels and fields. I need for the input fields and labels to be lined up to where there is a perfect line running down the center of them, essentially dividing them because the labels are stacked on top of one another and input fields are stacked on top of one another. The code below already resembled how I want it to look, other than that the form is on the left edge and my labels and input fields aren't perfectly lined up.

This is my form so far:

<div style="text-align:center">
            <form>
                <div>
                    Name: <input type="text" name="Name" size="40"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Address: <input type="text" name="Address" size="50"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    City: <input type="text" name="City" size="25"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    State: <input type="text" name="State" size="25"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Zip: <input type="text" name="Zip" size="25"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Email: <input type="text" name="Email" size="40"/>
                    <br/>
                    <br/>
                </div>
                <div>
                    Subscribe to our mailing list?
                    <br/>
                    <input type="radio" name="AddToList" value="yes" checked="checked" />Yes
                    <input type="radio" name="AddToList" value="no" />No
                    <br/>
                    <br/>
                </div>
                <div>
                    Comments:<br/>
                    <textarea name="comments" cols="70" rows="10" placeholder="Expected value of input"></textarea>
                    <br/>
                    <br/>
                    <input type="submit" />
                    <input type="reset" />
                </div>
            </form>
        </div>

So far, the only CSS I have for this form is:

form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}

This is what I am trying to accomplish:

Any help or advice would be great and highly appreciated, I am really just dumbfounded by this one. I tried using some of the centering methods for tables, none of which worked.

Solution

check this i just positioned it with css

<!DOCTYPE html>
<html>
<head>
<title>index</title>
<style>label{
    position: relative;
    bottom: 2px;
}
input{
    position: relative;
    margin-top: 10px;
}

.text{
    display: flex;
    justify-content: center;
}

.text{
    display: flex;
    justify-content: center;
    
}

</style>

</head>

<body>
    <div style="text-align:center">
        <form>
            <div>
               
                <label> Name:</label>
                 <input type="text" name="Name" size="40"/>
                
            </div>
            <div>
                <label style="left:27px"> Address:</label>
                
                <input type="text" name="Address" size="50" style="left:27px;"/>
                
            </div>
            <div>
                <label style="right: 46px;">City: </label>
                <input type="text" name="City" size="25" style="right:46px;"/>
                
            </div>
            <div>
                <label style="right:48px">State:</label>
                 <input type="text" name="State" size="25"/ style="right: 49px;">
                
            </div>
            <div>
               <label style="right: 43px;"> Zip:</label> <input type="text" name="Zip" size="25" style="right: 44px;"/>
                
            </div>
            <div>
                
                <label style="bottom: 0px;" > Email:</label>
                 <input type="text" name="Email" size="40"/>
                
            </div>
            <div style="right: 180px; position: relative;" >
                <label>Subscribe to our mailing list?</label>
                
                <input type="radio" name="AddToList" value="yes" checked="checked" />Yes
                <input type="radio" name="AddToList" value="no" />No
                <br/>
                <br/>
            </div>
            <div class="text">
                <br>
                <br>
               <label style="top: 60px; left: 70px;"> Comments: </label>
                <textarea name="comments" cols="70" rows="10" placeholder="Expected value of input" style="left: 84px;  position: relative;"></textarea>
                <br/>
                <br/>
              
            </div >
            <div class="submit" style="right: 80px; position: relative;">
            <input type="submit" width="" />
            <input type="reset" />
        </div >
        </form>
    </div>

    <script src="test.js"></script>
</body>
</html>