Center image in a square column

Question

I need to make a few boxes with logo images that are centered. And I tried doing it with padding, just placing an image inside a column, centering it and adding top and bottom padding. But the thing is, I'll have a few of those boxes inside the grid with different size images and that'll end up looking messy. Is there another way for me to do this?

Here's an image of the box I'm trying to make:

And here's the rough outline of my code:

.col-lg-6 {
  background-color: #8dc63f;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-lg-6">
  <img src="http://via.placeholder.com/200x100">
</div>

Answer 1

您可以使用相对/绝对位置与转换设置配对，如此片段所示：

.col-lg-6 {
  background-color: #8dc63f;
  position: relative;
  height: 200px;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-lg-6">
  <img src="http://via.placeholder.com/200x100">
</div>