How to align an input element in the middle of a div?

Question

For below html code

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  /* url(some img)*/
  padding-left: 15px;
  padding-top: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
}
.customername {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
}
.customername {
  height: 5%;
}
.customername {
  margin-top: 5px;
}
.shoppingform > div > input {
  border-radius: 5px;
  width: 60%;
}
.formlabel {
  display: inline-block;
  width: 30%;
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step1: Your details
  <br>
  <div class="customername">
    <label class="formlabel">Name:</label>
    <input type="text">
  </div>
</form>

Run codeHide result

There are several elements div(e.g. customername) that do not have the code above to make the question simple.

labeland the inputtext is at the top of the container div.

How to vertically align the text labeland inputin the middle of the container div? To add, there are several elements in the form div.

Answer 1

Changed the code slightly so that your elements are vertically aligned as suggested.

, , , .

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  /* url(some img)*/
  padding-left: 15px;
  padding-top: 10px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
}
.customername {
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;  
}
.customername {
  height: 5%;
}
.customername {
  margin-top: 5px;
}
.shoppingform > div > input {
  border-radius: 5px;
  width: 60%;
}
.formlabel {
  display: inline-block;
  width: 30%;
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step1: Your details
  <br/>
  <div class="customername">
    <label class="formlabel">Name:</label>
    <br/>
    <input type="text">
  </div>
</form>

Hide result

Answer 2

.shoppingform {
  width: 400px;
  height: 800px;
  background: #7CB9E8;
  padding-left: 15px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  padding-top: 47.5%;
}
.customername {
  margin: auto;
  border: 1px solid white;
  color: black;
  font-weight: normal;
  padding: 10px 2px 5px 5px;
  background: #B284BE;
  width: 90%;
  border-radius: 5px;
  height: 5%;
  margin-top: 5px;
}
.shoppingform > div > input {
  border-radius: 5px;
  width: 60%;
}
.formlabel {
  display: inline-block;
  width: 30%;
}

<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
  Step1: Your details
  <br>
  <div class="customername">
    <label class="formlabel">Name:</label>
    <input type="text">
  </div>
</form>

Hide result