react列中的图像完全居中

Question

我很难在bootstrap 4列中对齐一些图像。我已经尝试使用CSS属性text-align: center，这将使图像水平居中。我的列占据了大量的视图端口，所以我还需要图像垂直居中。

下面是我的react组件返回的内容。class="img13“是我想要的中心。

<div id="border">
        <div class="container">
            <div class="row tower">
                <div class="col-sm-3 towers" id="tower1">
                    <div class="tower-icon"><img class="img13" src={character}></img></div>
                </div>
            </div>
        </div>
    </div>

这是我目前拥有的CSS。它将图像硬编码为在一列中居中，但是如果我更改了站点的显示大小，或者使用了不同的图像，它将不再居中。.row{显示: flex;}

.towers {
    color: white;
    height: 100%; 
    position: relative;
}
.tower-icon{
    margin-top: 52%;
    margin-bottom: 48%;
    
}
.img13{
    height: auto;
    width: 100%;
}

Start Menu这里是组件外观的附加图片。背景是列，“start”图片是class="img13“

Answer 1

将包含图像的div设置为视口的高度，然后将其display属性设置为flex。然后给图像一个margin: auto。

.tower-icon {
    height: 100vh;
    display: flex;
}
 .img13 {
    margin: auto;
    height: auto;
    width: 100%;
}

Answer 2

您可以利用flexbox和自动居中对齐.tower-icon div中的所有内容，如下所示：

.tower-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

请注意，徽标将在带有.col-sm-3类的列的约束内水平和垂直居中。

测试链接：

https://jsbin.com/sekosibizo/edit?css,output