Html 减少浏览器窗口时如何将引导映像居中对齐（响应）

这是我的代码示例。在浏览器的

全屏中，一切看起来都很好。但当我调整它的大小时，图像（卡片）更偏向左侧（不居中）。
我怎样才能解决这个问题

HTML代码：

<div  class="container-fluid">          
        <div class="row ">
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>              
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
            <div class="col-md-2">
                <figure class="imghvr-fold-up">
                    <figcaption class="text-center">
                        Hello                           
                    </figcaption>                        
                    <img src="http://via.placeholder.com/200x200" class="img-thumbnail" alt="Cinque Terre">
                </figure>    
            </div>
        </div>
    </div>


你好
你好
你好
你好
你好
你好

由于我使用的是
bootstrapv4
，它应该会根据页面自动调整。但以下是我的经验

当在较小屏幕上时，您可以尝试在图像上使用间隔类
mx sm auto
，有关这些的更多信息，请参见此处：
当在较小屏幕上
mx sm auto
时，您可以尝试在图像上使用间隔类，有关这些的更多信息，请参见此处：
将
边距：自动
和
显示：块
添加到图像以使其居中



.img缩略图{margin:auto；display:block}

你好
你好
你好
你好
你好
你好
向图像添加
边距：自动
和
显示：块
，使其居中



.img缩略图{margin:auto；display:block}

你好
你好
你好
你好
你好
你好
应用
显示：内联块到
img
标记，然后应用
文本对齐：居中到父级

在代码中，应用了
display:block到图像标签。其中，现在图像充当被阻止的元素。这就是为什么您的图像没有在中心对齐

我已经应用了
文本对齐：居中对于
imghvr折叠起来
，因为我可以在一个点上处理标题和图像

输出：
//CSS
.img缩略图{
显示：内联块；
}

你好
你好
你好
你好