How to center a card inside a container ( bootstrap) [duplicate] - html

Question

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I have a container and, inside it, a card. I tried using justify-content-center,mx-auto and hardcoding css properties to bring the card to the center of the container, but I did not get the actual output.
Here is my html file
<div class="container bg-warning">
<div class="row mx-auto centermycard">
<div class="card mx-auto ">
<div class="card-title"><h2 class="text-center">Find Lyrics For Your Song</h2></div>
<div class="card-body ">
<div class="container">
#using (Html.BeginForm("FetchLyrics", "LandingPage", FormMethod.Get, Model))
{
#Html.ValidationSummary(true, "Please fix the below errors")
<div class="form-group">
#Html.LabelFor(model => model.songname, "I want a Song")
#Html.TextBoxFor(model => model.songname, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.songname)
</div>
<div class="form-group">
#Html.LabelFor(model => model.moviename, "From Movie")
#Html.TextBoxFor(model => model.moviename, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.artist, "By Artist")
#Html.TextBoxFor(model => model.artist, new { #class = "form-control" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.genre, "In genre")
#Html.TextBoxFor(model => model.genre, new { #class = "form-control" })
</div>
<div class="form-group">
<button class="btn btn-block btn-primary col-md-8 col-lg-8 text-center justify-content-center">Search</button>
</div>
}
</div>
</div>
</div>
</div>
</div>
centermycard css properties
.centermycard {
margin:0 auto;
}
where did I miss?

Answer 1

Adding the class mx-auto to just the card worked fine. JSFiddle
However, I don't understand why you're using a container within a card itself. You already have the entire thing enclosed in a container.