Как сделать форму в центре экрана?

Question

Я создал контактную форму, я пробовал формы, но bootstrap, но не смог переместить ее в центр экрана. Не могли бы вы помочь мне переместить это и расставить рамки вокруг форм. Что я не мог сделать. Я пытаюсь это в angular 8

    <div class="container">
<h2 >Contact Form</h2>
<div class="container"> 
<form [formGroup]="profileForm"(ngSubmit)="onSubmit()">

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Your Name:</label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="yourname" >
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label"> Email: </label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="email">

  </div>
</div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">  Items:</label>
    <div class="col-sm-5">
      <select id="Item" class="form-control" formControlName="item">

          <option *ngFor="let c of item"  [ngValue]="c">{{ c }}</option>

      </select>
    </div>
    </div>

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Name: </label>
  <div class="col-sm-5">
    <input type="text" class="form-control" formControlName="name">
  </div>
  </div>


<div class="form-group row">
  <label class="col-sm-2 col-form-label">
    Remarks:</label>
    <div class="col-sm-5">
    <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
</div>
</div>
<div class="dialog">
  <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
  </form>
</div>  

</div> 

CSS ниже:

.container {
    display: block;
    border: 2px black;
    border-radius: 4px;
    box-sizing: border-box 1px black;
  } 

Answer 1

вы можете сделать что-то вроде этого, код, которым вы поделились, имеет ограниченное содержание. Я пытался исправить это только.

использовать justify-content: center; align-items: center;

это должно исправить вашу проблему.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

<div class="container">
  <h2>Contact Form</h2>
  <div class="container">
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Your Name:</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="yourname">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Email: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="email">

        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">  Items:</label>
        <div class="col-sm-5">
          <select id="Item" class="form-control" formControlName="item">

            <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>

          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Name: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="name">
        </div>
      </div>


      <div class="form-group row">
        <label class="col-sm-2 col-form-label">
    Remarks:</label>
        <div class="col-sm-5">
          <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
        </div>
      </div>
      <div class="dialog">
        <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
      </div>
    </form>
  </div>

</div>

Answer 2

Еще один способ реализовать этот дизайн с помощью display: table Пожалуйста, внимательно ознакомьтесь с моим кодом, и дайте мне знать, если у вас есть запрос.

Надеюсь, он вам поможет. :)

    .container {
    display: table;
    border: 2px black;
    border-radius: 4px;
    box-sizing: border-box 1px black;
        height: 100%;
    vertical-align: middle;
    margin: 0 auto;
  } 
  .container form {
    display: table-cell;
    vertical-align: middle;
}

    <div class="container">

<div class="container"> 
    
<form [formGroup]="profileForm"(ngSubmit)="onSubmit()">
<h2 >Contact Form</h2>
  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Your Name:</label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="yourname" >
  </div>
</div>
<div class="form-group row">
  <label class="col-sm-2 col-form-label"> Email: </label>
  <div class="col-sm-5">
    <input  type="text" class="form-control" formControlName="email">

  </div>
</div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">  Items:</label>
    <div class="col-sm-5">
      <select id="Item" class="form-control" formControlName="item">

          <option *ngFor="let c of item"  [ngValue]="c">{{ c }}</option>

      </select>
    </div>
    </div>

  <div class="form-group row">
  <label class="col-sm-2 col-form-label"> Name: </label>
  <div class="col-sm-5">
    <input type="text" class="form-control" formControlName="name">
  </div>
  </div>


<div class="form-group row">
  <label class="col-sm-2 col-form-label">
    Remarks:</label>
    <div class="col-sm-5">
    <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
</div>
</div>
<div class="dialog">
  <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
</div>
  </form>
</div>  

</div> 

Answer 3

Ваш код правильный и требует лишь небольшого изменения. Вы сказали, что используете bootstrap, поэтому я попытался использовать классы из bootstrap, чтобы продемонстрировать, как это будет выглядеть, используя здесь css. Но это будет работать, если вы только скопируете содержимое html. Дайте мне знать, если вам нужна дополнительная помощь.

.container {
  width: 300px;
  border: 2px solid black;
  border-radius: 4px;
  padding: 10px;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.text-center {
  text-align: center;
}

.justify-content-center {
  justify-content: center;
}

.align-self-center {
  align-self: center;
}

<div class="d-flex flex-column">
  <div class="container align-self-center">
    <h2 class="text-center">Contact Form</h2>
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Your Name:</label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="yourname">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Email: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="email">

        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label">  Items:</label>
        <div class="col-sm-5">
          <select id="Item" class="form-control" formControlName="item">

            <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>

          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"> Name: </label>
        <div class="col-sm-5">
          <input type="text" class="form-control" formControlName="name">
        </div>
      </div>


      <div class="form-group row">
        <label class="col-sm-2 col-form-label">
    Remarks:</label>
        <div class="col-sm-5">
          <textarea class="form-control" type="text" formControlName="remarks" rows="3">
  </textarea>
        </div>
      </div>
      <div class="dialog text-center">
        <button type="submit" color=#C93C6A class="btn-block" [disabled]="!profileForm.valid">Submit</button>
      </div>
    </form>
  </div>
</div>

Answer 4

        <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2>Contact Form</h2>
                    </div>
                    <div class="card-body d-flex justify-content-center">
                        <form class="w-75" [formGroup]="profileForm" (ngSubmit)="onSubmit()">

                            <div class="form-group row">
                                <label class="col-2 col-form-label"> Your Name:</label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="yourname">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Email: </label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="email">

                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Items:</label>
                                <div class="col">
                                    <select id="Item" class="form-control" formControlName="item">

                                        <option *ngFor="let c of item" [ngValue]="c">{{ c }}</option>

                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label"> Name: </label>
                                <div class="col">
                                    <input type="text" class="form-control" formControlName="name">
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    Remarks:</label>
                                <div class="col">
                                    <textarea class="form-control" type="text" formControlName="remarks"
                                        rows="3"></textarea>
                                </div>
                            </div>
                            <div class="dialog">
                                <button type="submit" color=#C93C6A class="btn-block"
                                    [disabled]="!profileForm.valid">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>