Aligning Form Elements in CSS

Question

I am having trouble aligning my form elements to the center of the page; each div has a class of form-group each with different input tags and all elements are wrapped in a div container. I set the margin to auto and display block but nothing happens to try to align them. Here is my code for the form:

https://code.sololearn.com/WtAgA4GexUOY/?ref=app

Answer 1

I Suggest using flexbox
add these properties to your form-group class
display: flex;
justify-content: center;
align-items: center;
flex-direction : column;
I hope that solves your problem
More options with flexbox link below
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You can try as Mehrdad Sh said or check out this
https://code.sololearn.com/W7tY8MEFFA4v/?ref=app

Answer 3

Thanks, both of you