Question

我有一个页面正在使用引导程序显示内容，并且大部分内容都显示在我想要的位置，除了我的图像即使垂直居中也没有水平居中。

我正在努力做到这一点，以便如果有人添加了小图像或大图像，则该图像始终包含在列/行中并对该容器作出响应，但我也想确保图像要比恰好位于该容器中间的容器小。

除非另有说明，否则我在这里缺少什么来确保图像居中对齐？

    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>

Answer 1

您是否尝试过 display: block 图片

如果您可以提供布局图，则希望将其存档

Answer 2

请检查以下链接。这可能对您有帮助。我已将flex属性添加到父div。谢谢

https://jsfiddle.net/fzod273t/15/ enter

Answer 3

您可以通过添加类col-lg-3而不是col-lg-12来使图像居中，并将div标签样式设置为margin：0px auto以使其居中

<div class="col-lg-3" id="fullColumn" style="margin: 0px auto;">
    <div class="fullContent" id="fullContent" style="height: 100%; ">

    </div>
</div>

使用引导程序使图像居中垂直和水平

3 个答案: