我正试图将一个小图像定位在一个bibber图像的中心。这两个映像都位于引导列中。

                <div className="row justify-content-center my-5 ">
                <div className="col-xs-10 col-sm-6 my-auto mx-auto">
                    <Fade left duration={1000} delay={1000} fraction={0.1} >                    
                        <div className="father">
                            <img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
                            <img src="/img/logo02.png" alt="logo" className="logo"/>
                        </div>
                    </Fade>
                </div>

这是CSS。

                <div className="row justify-content-center my-5 ">
                <div className="col-xs-10 col-sm-6 my-auto mx-auto">
                    <Fade left duration={1000} delay={1000} fraction={0.1} >                    
                        <div className="father">
                            <img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
                            <img src="/img/logo02.png" alt="logo" className="logo"/>
                        </div>
                    </Fade>
                </div>

正如您在注释的CSS代码中看到的，我尝试将较小的图像设置为绝对图像，并使用顶部、左侧甚至转换/翻译。问题是，当站点适应用户屏幕大小时，它不会保持居中。

不能将两幅图像与photoshop结合使用，因为我想对“较小的图像”应用效果。

谢谢，

顺晟科技：

您可以将images容器设置为并使用flex属性将元素居中。

但是，我没有用bootstrap测试它，所以可能会有一些样式冲突。

尝试:

                <div className="row justify-content-center my-5 ">
                <div className="col-xs-10 col-sm-6 my-auto mx-auto">
                    <Fade left duration={1000} delay={1000} fraction={0.1} >                    
                        <div className="father">
                            <img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
                            <img src="/img/logo02.png" alt="logo" className="logo"/>
                        </div>
                    </Fade>
                </div>