align a form to the center Using width and height

Question

I'm totally new to the web development. I have a form and I want it in the middle of the content. My form width is 930px and its heights are

min-height: 450px;
max-height: 860px;

So, I tried different ways but i wasn't able to do this. This may be a silly question but can any one please help me with this?

HTML is -

    <div class="container" ng-show="showthejdData">
                    <div class="row">
                        <form class="form-horizontal jdformCorners">

                            <!--ngFor-->
                            <div class="form-group">
                                <label for="must" class="col-sm-2  ">MustRequirement</label>
                                <div class="col-xs-5">
                                    <input type="text" class="form-control setmargin" id="must" placeholder="must requirement">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="should" class="col-sm-2">ShouldRequirement</label>
                                <div class="col-xs-5">
                                    <input type="text" class="form-control setmargin" id="should" placeholder="should requirement">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="could" class="col-sm-2">CouldRequirement</label>
                                <div class="col-xs-5 setmargin">
                                    <input type="text" name="could" class="form-control setmargin" id="could" placeholder="could requirement"></textarea>
                                </div>
                            </div>
    </form></div></div>


CSS- 

        .jdformCorners {
          border-radius: 25px;
            border: 2px solid #dddddd;
            padding: 20px;
            width: 932px;
            min-height: 450px;
            max-height: 860px;
        }
    .setmargin {
      margin-left: 0px;
    }

Answer 1

you could use this :

#form1 {
    display: block;
    text-align: center;
    margin : 0 auto;
}

i also removed the width from .jdformCorners to be responsive here is a jfiddle :

https://jsfiddle.net/f8ugLor9/5/

Answer 2

hello my dear friend the best way for that is this way beacause with this way you can make it responsive :

 .form{ width:35%;/*or use what percantage do you want*/ margin : 0 auto ;/*with this syntax you can centerlize your form*/ display : block;/*this means this form must get full block*/ } .innerform{ display:block; margin : 5px; } 

 <div class="form"> <div class="innerform"> <input /> </div> <div class="innerform"> <input /> </div> </div> 

Answer 3

There are many ways to center using css. One simple way is to use margin: 0 auto; for items with display = block (and have its width smaller than its parent's width).

To center all the <div> element inside the <form> , you can add display: flex for .jdformCorners :

display: flex;
flex-direction: column;
align-items: center;

See full source code here: https://jsfiddle.net/d48tdsed/1/

Also, check out this website: http://howtocenterincss.com/