Attempting to align all input boxes in the center of the page - html

Question

Currently I am making a form that has multiple inputs and I am using flex box to make these inputs appear in a column, and text-align center to get the whole form into a centered row. I am attempting to get the text boxes all be in the center of the page and the text move over accordingly.
.mainForm {
text-align: center;
}
.left {
float: left;
}
.inputs {
display: flex;
flex-direction: column;
}
.radio {
display: flex;
justify-content: center;
}
textarea {
overflow-y: scroll;
resize: none;
}
.feedBack {
text-align: center;
}
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>

Answer 1

If you want your input/textarea to be absolutely centered, you will have to wrap your text in the <label> element (or any other HTML element, but for usability reason you should always use <label>). That is because we want to position the text independently of the input. An example:
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
When that is done, you can use the following trick:
Set a fixed width for your input elements. Let's say we want them to be 200px wide. Instead of setting this on the input elements themselves, we set it on the containing parent, .formInputs, and then set input elements to take up this full width.
Position the <label> element absolutely within the .formInputs parent. Set it to right: 100% so that it will be offset to the left by the full width of the parent.
Use a right padding so that the right edge of the label text is not directly sticking to the left border of your input
See proof-of-concept below:
textarea {
overflow-y: scroll;
resize: none;
}
.formInputs {
position: relative;
width: 200px;
margin: 0 auto;
}
.formInputs label {
position: absolute;
right: 100%;
padding-right: 10px;
white-space: nowrap;
}
.formInputs input,
.formInputs textarea {
width: 100%;
}
<div class="information">
<p class="formInputs">
<label for="polNum">Policy Number:</label>
<input id="polNum" name="polNum" type="text" />
</p>
<p class="formInputs">
<label for="membNbr">Control Number:</label>
<input id="membNbr" name="membNbr" type="text" />
</p>
<p class="formInputs">
<label for="lastName">Last Name or Business Name:</label>
<input id="lastName" name="lastName" type="text" />
</p>
<p class="formInputs">
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" />
</p>
<p class="formInputs">
<label for="comment">Comments:</label>
<textarea name="comment" id="comment" cols="30" rows="2"></textarea>
</p>
</div>

Answer 2

Something like this?
.information{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
http://jsfiddle.net/Lcgfqjh9/

Answer 3

You can put the whole thing in a wrapper, apply flex with the below settings to it to center the form, and apply flex and justify-content: space-between to the single lines (i.e. the .formInputs elements) to align the text and input fields at the left and right border:
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.formInputs {
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="information">
<p class="formInputs"> Policy Number:
<input id="polNum" name="polNum" type="text" onkeyup="javascript:displayPolicyNumber()" /></p>
<p class="print">Policy Number: <span class="display" id="display_policyNumber"></span></p>
<p class="formInputs">Control Number:
<input id="membNbr" name="membNbr" type="text" onkeyup="javascript:displayControlNumber()" /></p>
<p class="print">Control Number: <span class="display" id="display_controlNumber"></span></p>
<p class="formInputs">Last Name or Business Name:
<input id="lastName" name="lastName" type="text" onkeyup="javascript:displayLastName()" /></p>
<p class="print">Last Name or Business Name: <span class="display" id="display_lastName"></span></p>
<p class="formInputs">First Name :
<input id="firstName" name="firstName" type="text" onkeyup="javascript:displayFirstName()" /></p>
<p class="print">First Name: <span class="display" id="display_firstName"></span></p>
<p class="formInputs">Comments:
<textarea name="comment" id="comment" cols="30" rows="2" onkeyup="javascript:displayComments()"></textarea></p>
<p class="print">Comments: <span class="display" id="display_comment"></span></p>
</div>
</div>

Answer 4

Wrap your form in a div.
Set the div's display to block and text-align to center (this will
center the contained form).
Set the form's display to inline-block (auto-sizes to content), left
and right margins to auto (centers it horizontally), and
text-align to left (or else its children will be center-aligned too).
HTML file
<div class="form">
<form method = "post", action="">
---------
</form>
</div>
in .css
use like this
div.form {
display: inline-block;
text-align: center;
}