How do you center multiple textboxes in html - html

Question

In the middle of the page is where I need the textboxes

Answer 1

horizontal plus vertical center is troublesome.
first center horizontally by making your parent display: flex
and include two bracketting children that stretch flex: 1 as well as your centered element (this allows it to be a perfect third, if you want it to instead be bigger, remove flex: 1 for the center child and put a width in percentage instead (pixel works but will not scale))
then center vertically by adding a margin top where you calculate leftover size :
.centeredchild {
background-color: red;
height: 20px;
flex: 1;
text-align: center;
margin-top: calc(50vh - 10px);
}
.centeringaid {
flex: 1;
}
.parent {
width: 100%;
height: 100vh;
display: flex;
background-color: lightblue;
}
<div class="parent">
<div class="centeringaid"></div>
<div class="centeredchild">hi</div>
<div class="centeringaid"></div>
</div>
there's also the more common method : https://www.w3schools.com/howto/howto_css_center-vertical.asp
this website, by the way is full of usefull tidbits.

Answer 2

Refer below code snippet to align your multiple text boxes in the middle of the page. (Consider page height to be 400px)
.main-div {
height: 400px;
position: relative;
}
.sub-div {
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
input[type="text"] {
margin:10px auto;
border: 1px solid gray;
}
<div class="main-div">
<div class="sub-div">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>

Answer 3

You use this code:
CSS:
.outercontainer {
height: 200px;
position: relative;
border: 3px solid green;
}
.innercontainer {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
HTML:
<div class="outercontainer">
<div class="innercontainer">
<p>This sentance is it the middle!</p>
</div>
</div>