Using bootstrap to make image centered vertical and horizontal

Question

I have a page that is displaying content using bootstrap and I've gotten most of it about where I want it, except that my images, even though centered vertically, are not centered horizontally.

I'm trying to make it so that if someone adds a small image or a huge image, that it is always contained in the column/row and is responsive to that container, but I also want to make sure that if the image is smaller than the container that it sits perfectly in the middle of that container.

What am I missing here to make sure that an image is centered and middle aligned unless specified otherwise?

    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>

Update:

Here's an image of the current situation (image is too high, though vertically centered) and the output I'm trying to achieve (no matter image size it is centered both vertically and horizontally)

UPDATE:

Multiple 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>

score 1 · Answer 1 · answered Jan 11 '19 at 03:56

1

have you tried display: block for image

if you can give a drawing of the layout you are looking to archive it helps

answered Jan 11 '19 at 03:56

Buddhi

2,224
5
32
43

Unfortunately that didn't resolve it, but I added an image above in my question – Geoff_S Jan 11 '19 at 04:14

score 1 · Accepted Answer · answered Jan 11 '19 at 04:16

1

Please check below link. This might help you. I have added flex property to the parent div. thanks

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

answered Jan 11 '19 at 04:16

Xenio Gracias

2,728
1
9
16

That got it, thank you! – Geoff_S Jan 11 '19 at 04:39
Sorry, actually: I just added an update above with multiple divs, can you tell me why it doesn't work for those? The images aren't centered or middle aligned for those – Geoff_S Jan 11 '19 at 05:22
.(dot) is used for class and #(hash) is used for id. change dot to # it will work. Thanks – Xenio Gracias Jan 11 '19 at 05:28

score 0 · Answer 3 · answered Jan 11 '19 at 04:27

You can make the image at center by add class col-lg-3 instead of col-lg-12 and give the div tag style is margin:0px auto to make it at center

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

    </div>
</div>

Using bootstrap to make image centered vertical and horizontal

3 Answers3