How can I make the form to center of screen - html

Question

I have created an contact form, i tried forms but bootstrap but unable to move it to center of the screen. Can you please help me to move this and arrange a box around the forms.Which i could not do. I am trying this in 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 below:
.container {
display: block;
border: 2px black;
border-radius: 4px;
box-sizing: border-box 1px black;
}

Answer 1

you can do something like this, the code you shared has limited contents. I tried to fix that only.
use justify-content: center;
align-items: center;
this should fix your issue.
.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

<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>

Answer 3

Your code is correct and only needs a slight change. You said that you were using bootstrap so I have tried to use the classes from bootstrap to showcase how it will look by using it in the css here. But this will work if you only copy the html contents. Let me know if you need any further help.
.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

One more way to achieve this design using display:table
Please review my code carefully, And let me know if you have any query.
Hope it will help you. :)
.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>