How to center form in parent div? - html

Question

In my form, the lables/inputsare aligned with floats and fixed widths. Because of this, my labels have empty whitespace which makes it difficult to center the form in the parent div.
How can I center this form?
#Form1Layout {
font-family: Verdana;
font-size: 10pt;
margin-top: 10px;
text-align: center;
padding: 10px;
}
#Form1Layout label {
text-align: right;
padding-right: 10px;
width: 80px;
}
#Form1Layout input {
width: 300px;
}
#Form1Layout label,
#Form1Layout input {
display: block;
float: left;
margin-bottom: 10px;
}
#Form1Layout br {
clear: both;
}
<div>
<div id="Form1Layout">
<label>User name:</label><input type="text" /><br>
<label>Address:</label><input type="text" /><br>
<label>Phone:</label><input type="text" /><br>
<label></label><button class="My_Button">Submit</button>
</div>
</div>

Answer 1

Use flexboxes for that. Here is a quick example.
(I intentionnaly increased the height of the inputs to show you how it works).
#Form1Layout {
font-family: Verdana;
font-size: 10pt;
margin-top: 10px;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
#Form1Layout > div {
flex: 1 1 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 6px 0;
}
#Form1Layout label {
text-align: right;
padding-right: 10px;
width: 80px;
}
#Form1Layout input {
width: 300px;
height: 80px;
}
<div>
<div id="Form1Layout">
<div><label>User name:</label><input type="text" /></div>
<div><label>Address:</label><input type="text" /></div>
<div><label>Phone:</label><input type="text" /></div>
<div><label></label><button class="My_Button">Submit</button></div>
</div>
</div>