How to centre elements in a div - html

Question

I try to bring input fields in to the centre of the page. For some reasons the padding that I have set for the input fields moves them to right and I don't want this. Could please somebody help me to fix this? Here is the code.
.BeWeird_register_container {
display: flex;
justify-content: center;
}
.BeWeird_register_wrapper {
width: 60%;
}
input[type=text],
select {
border: none;
width: 100%;
padding: 30px 20px;
margin: 8px 0;
display: inline-block;
background-color: #000;
color: #BBFB34;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 1.2vw;
}
<div class="BeWeird_register_container">
<div class="BeWeird_register_wrapper">
<div class="BeWeird_login_wrapper">
<div class="login_image"><img src="Images/LoginImage.png" alt="" /></div>
<form method="post" action="BeWeird_login.php">
<?php include('errors.php'); ?>
<div class="login_form_wrapper">
<div class="input-group">
<input class="login" type="text" placeholder="Username" name="username">
</div>
<div class="input-group">
<input class="login" type="password" placeholder="Password" name="password">
</div>
<div class="input-group">
<button class="login" type="submit" class="btn" name="login_user">Login</button>
</div>
</form>
</div>
</div>
</div>
Help would much appreciated. Thanks for in advance.

Answer 1

In my opinion, you put display: flex in styles of the wrong container.
You want to center the DOM of login_form_wrapper.
Remember that flex-direction is set to row` as default.
Here's a nice explanation of how to use flex.
A Complete Guide to Flexbox
Correct me if I am wrong but as far as I understand that's what you are looking for:
JsFiddle
David

Answer 2

To center inputs in your form, add style="text-align:center;" to the parent element that contains the inputs, in this case that is the login_form_wrapper class.
Also, if you check the boxes in the browser (F12), you will see that the div BeWeird_login_wrapper shows larger than it should be. For simplicity, just make use of the structure above this heading MDN web docs and nest the divs.

Answer 3

thanks for your help guys. The code was fine. It just needed in the input css code box-sizing:border-box;
like this:
input.login[type=text], select {
border:none;
width: 100%;
padding: 30px 20px;
margin: 8px 0;
box-sizing:border-box;
background-color: #000;
color:#FEA6E5 !important;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size:1.2vw;
}

Answer 4

You can mention use:
outer-element{
display:flex;
justify-content:center;
align-items:center;
}