<分区>
html - 使用bootstrap使图像垂直和水平居中
标签 html css bootstrap-4
我有一个使用 bootstrap 显示内容的页面，我已经在我想要的位置获得了大部分内容，除了我的图像，即使垂直居中，也没有水平居中。
我正在尝试做到这一点，如果有人添加了一个小图像或一个大图像，它总是包含在列/行中并且响应该容器，但我也想确保如果图像比容器小，它正好位于容器的中间。
除非另有说明，否则我在这里缺少什么来确保图像居中和居中对齐？
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img {
max-width: 100%;
height:auto;
margin:0 auto;
}
.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
/*background-image: url('images/bg_green.svg');*/
background-size: cover;
}
<div class="row middle" id="middle" style="background-image: url();">
<div class="col-lg-12" id="fullColumn">
<div class="fullContent" id="fullContent" style="height: 100%; ">
</div>
</div>
</div>
更新:
这是当前情况的图像(图像太高，但垂直居中)和我试图实现的输出(无论图像大小，它都垂直和水平居中)
更新:
多个 DIVS
.topLeftContent{
display:flex;
justify-content:center;
align-items:center;
}
.bottomLeftContent{
display:flex;
justify-content:center;
align-items:center;
}
.rightQtrContent{
display:flex;
justify-content:center;
align-items:center;
}
<div class="col-lg-6" id="rightColumnQtrHalf" >
<div id="rightQtrContent" style=" height: 100%; ">
</div>
</div>
最佳答案
请检查以下链接。这可能对你有帮助。我已将 flex 属性添加到父 div。谢谢
关于html - 使用bootstrap使图像垂直和水平居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54140137/