使图像在Boostrap网格中居中

Question

.centro{
display: flex;
align-items: center;
justify-content: center; 
margin: auto 0;
padding:32px;
}

.uno img{
	margin: auto 0;
	width:150px;  
}
.uno:hover {
	background-color: #005ce2;
	height:185px;
}

.dos img{
	width:150px;  
}
.dos:hover {
	background-color: #c5d544;
	height:185px;
}

.tres img{
	/*margin: auto 0;*/
	width:150px;  
}
.tres:hover {
	background-color: #005ce2;
	height:185px;
}


.uno, .dos, .tres, .cuatro{
margin-top:8em;
height:185px;

margin-left:-90px;
margin-right:180px;
}

.C00{
position:relative;
top:-70px;
	
margin-right:90px;
margin-left:50px;
}

.container-fluid{

	width:160%;
/*margin-left:30px;
margin-right:100px;*/
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<div class="container-fluid">
<div class="row C00">
<div class="col-lg  uno centro"><img class="img-responsive center-block" src="https://i.imgur.com/nosZ9IN.png" /></div>
<div class="col-lg  dos centro"><img class="img-responsive center-block" src="https://i.imgur.com/vM2TeHE.png" /></div>
<div class="col-lg tres centro"><img class="img-responsive center-block" src="https://i.imgur.com/vLrJkKM.png" /></div>
<div class="col-lg  cuatro centro">col-sm</div>
</div>
</div>

您好，我想使用CSS在Bootstrap中进行响应式居中，同时将Item居中对齐，但是当我逐渐调整浏览器大小时，它观察到图像在右侧对齐，这就是我的代码，具有和Bootstrap网格结构，在CSS代码中，使用元素的左右边界

<div class="container-fluid">
<div class="row C00">
<div class="col-lg  uno centro"><img class="img-responsive center-block" src="http://localhost/wordpress/wp-content/uploads/2020/02/trabajo-en-equipo.png" /></div>
<div class="col-lg  dos centro"><img class="img-responsive center-block" src="http://localhost/wordpress/wp-content/uploads/2020/02/medalla.png" /></div>
<div class="col-lg tres centro"><img class="img-responsive center-block" src="http://localhost/wordpress/wp-content/uploads/2020/02/fluir.png" /></div>
<div class="col-lg  cuatro centro">col-sm</div>
</div>
</div>





.centro{
display: flex;
align-items: center;
justify-content: center; 
margin: auto 0;
padding:32px;
}

.uno img{
    margin: auto 0;
    width:150px;  
}
.uno:hover {
    background-color: #005ce2;
    height:185px;
}

.dos img{
    width:150px;  
}
.dos:hover {
    background-color: #c5d544;
    height:185px;
}

.tres img{
    /*margin: auto 0;*/
    width:150px;  
}
.tres:hover {
    background-color: #005ce2;
    height:185px;
}


.uno, .dos, .tres, .cuatro{
margin-top:8em;
height:185px;

margin-left:-90px;
margin-right:180px;
}

.C00{
position:relative;
top:-70px;

margin-right:90px;
margin-left:50px;
}

.container-fluid{

    width:160%;

}

Answer 1

这是有效的解决方案:)希望这会有所帮助

.centro{
display: flex;
align-items: center;
justify-content: center; 
margin: auto 0;
padding:32px;
}

.uno img{
	margin: auto 0;
	width:150px;  
}
.uno:hover {
	background-color: #005ce2;
	height:185px;
}

.dos img{
	width:150px;  
}
.dos:hover {
	background-color: #c5d544;
	height:185px;
}

.tres img{
	/*margin: auto 0;*/
	width:150px;  
}
.tres:hover {
	background-color: #005ce2;
	height:185px;
}


.uno, .dos, .tres, .cuatro{
}

.C00{
position:relative;
   
}

.container-fluid{

	width:100%;
 }

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<div class="container-fluid">
<div class="row C00">
<div class="col-lg  uno centro"><img class="img-responsive center-block" src="https://i.imgur.com/nosZ9IN.png" /></div>
<div class="col-lg  dos centro"><img class="img-responsive center-block" src="https://i.imgur.com/vM2TeHE.png" /></div>
<div class="col-lg tres centro"><img class="img-responsive center-block" src="https://i.imgur.com/vLrJkKM.png" /></div>
<div class="col-lg  cuatro centro">col-sm</div>
</div>
</div>