Center a bootstrap panel inside a col class - html

Question

I want to center a bootstrap panel inside col class but the panel does not center horizontally and vertically.
Here is all the code
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
flex-grow: 1;
}
.vertical-align > div:first-child {
background-color: mediumaquamarine;
}
.vertical-align > div:last-child {
background-color: gold;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vertical-align">
<div class="col-xs-6 col-md-8">
<div id="bs-1" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner">
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
</div>
<a data-target="#bs-1" class="left carousel-control" role="button" data-slide="prev"></a>
<a data-target="#bs-1" class="right carousel-control" role="button" data-slide="next"></a>
</div>
</div>
<div class="col-xs-6 col-md-4" style="border:1px solid #555">
<div class="panel panel-default">
<div class="panel-body">
<form name="form" method="post" action="connecter" novalidate="" class="form" id="form">
<div class="row">
<div class="col-xs-12">
<div class="form-group m-b-20">
<label for="email">PIN</label> <input type="text" name="email_to" class="form-control" placeholder="PIN" />
<p class="error-block"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
<div class="row buttons">
<div class="col-xs-12 col-md-6">
<input type="submit" class="btn-login btn btn-warning btn-flat btn-block m-b-20" value="Login now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
How can i center horizentaly the panel with classes panel panel-default inside this DIV <div class="col-xs-6 col-md-4" style="border:1px solid #555"> ?
Tried with vertical-align: middle; but same, nothing changed !

Answer 1

I gave to panel panel-default, this id: id='change', and then added this css:
#center {
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
Which solves the problem.
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
flex-grow: 1;
}
.vertical-align > div:first-child {
background-color: mediumaquamarine;
}
.vertical-align > div:last-child {
background-color: gold;
}
#center {
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vertical-align">
<div class="col-xs-6 col-md-8">
<div id="bs-1" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner">
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
</div>
<a data-target="#bs-1" class="left carousel-control" role="button" data-slide="prev"></a>
<a data-target="#bs-1" class="right carousel-control" role="button" data-slide="next"></a>
</div>
</div>
<div class="col-xs-6 col-md-4" style="border:1px solid #555">
<div id='center' class="panel panel-default">
<div class="panel-body">
<form name="form" method="post" action="connecter" novalidate="" class="form" id="form">
<div class="row">
<div class="col-xs-12">
<div class="form-group m-b-20">
<label for="email">PIN</label> <input type="text" name="email_to" class="form-control" placeholder="PIN" />
<p class="error-block"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
<div class="row buttons">
<div class="col-xs-12 col-md-6">
<input type="submit" class="btn-login btn btn-warning btn-flat btn-block m-b-20" value="Login now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>