使用宽度和高度将表单与中心对齐

Question

我是Web开发的新手。 我有一个表格，我想在内容的中间。 我的表单宽度为930px ，高度为

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

因此，我尝试了不同的方法，但是我无法做到这一点。 这可能是一个愚蠢的问题，但是有人可以帮助我吗？

HTML是-

    <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

您可以使用此：

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

我还从.jdformCorners中删除了宽度，以便在这里响应jfiddle：

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

Answer 2

你好，亲爱的朋友，最好的方法是这样，因为这样可以使它响应 ：

 .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

有多种使用CSS居中的方法。 一种简单的方法是使用margin: 0 auto; 对于display = block项目（其宽度小于其父级的宽度）。

要将所有<div>元素居中放在<form> ，您可以添加display: flex for .jdformCorners ：

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

在此处查看完整的源代码： https ： //jsfiddle.net/d48tdsed/1/

另外，请访问此网站： http : //howtocenterincss.com/