Can't vertically centre image, but horizontal works

Question

I'm trying to make a custom follower alert for Twitch TV. And I'm trying to centre a small image inside a div. So far I've managed to centre it horizontaly but no matter what I try it will not centre vertically. I'm not sure why, i've tried reading many other questions on stackoverflow already, as well as following a guide from W3schools but I think this is more of a specific problem to my code. Here is a fiddle. (You can't see the image but you can see where the image would be)

And here is the code; with the idea being that the image is centered both horizontally and vertically inside the small blue square, which i've named 'left-square-container'. However currently the image is horizontally centered at the top of the div only.

If anyone can help I'd appreciate it.

@keyframes slideInFromAbove {
  0% {
    transform: translateY(-100%);
  }
  6% {
    transform: translateY(0);
  }
  98% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes slideInFromTheLeft {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  4.4% {
    opacity: 1;
    transform: translateX(0);
  }
  97% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideInFromBelow {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideInFromTheLeft-Text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.follower-container {
  display: flex;
  font-family: 'Roboto';
  position: absolute;
  overflow: hidden;
  /*hide elements when they overflow*/
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.left-square-container {
  width: 100px;
  height: 100px;
  background: #0d47a1;
  position: relative;
  display: inline-block;
  float: left;
  z-index: 1;
  transform: translateX(-100%);
  animation: 9.6s 1 slideInFromAbove;
  /* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

.icon img
/*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/

{
  display: block;
  margin: 0 auto;
  webkit-filter: drop-shadow(1px 1px 1px #212121);
  filter: drop-shadow(1px 1px 1px #212121);
}

.right-retangle-container {
  width: 400px;
  height: 100px;
  opacity: 0;
  background: #292929;
  border-top: 5px solid #0d47a1;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  position: relative;
  /* needed for z-index*/
  z-index: 0;
  /*place under left square*/
  transform: translateX(-100%);
  animation: 8.8s .6s 1 slideInFromTheLeft;
  /* timing (.5 initial animation duration + 8s hold + .3s removal of self) additional .6s of delay for animation of left square*/
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

.text {
  font-size: 30px;
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  /*vertical alignment of text*/
  position: relative;
  /*horizontal alignment of text*/
  top: 50%;
  /*horizontal alignment of text*/
  transform: translateY(-50%);
  /*horizontal alignment of text*/
}

.text-animation {
  transform: translateY(100%);
  animation: .5s 1s 1 slideInFromBelow;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  margin-left: 20px;
  margin-right: 20px;
}

.keyword:not(.user_message) {
  color: #f57f17;
}

<div class="follower-container">
  <div class="left-square-container">
    <div class="icon">
      <img class="image" src="{image}" />
    </div>
  </div>

  <div class="right-retangle-container">
    <div class="text">
      <div class="text-animation">
        New Follower <span class='keyword name'>{name}</span></div>
    </div>
  </div>
</div>

Possible duplicate of [How to vertically align an image inside div](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div) — litelite, Jul 14 '17 at 19:37
would something like [this](https://jsfiddle.net/audetcameron/2bdrq5d4/1/) work? as referenced [here](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div) — Cameron, Jul 14 '17 at 19:48

score 3 · Accepted Answer · answered Jul 14 '17 at 19:52

There are several ways to do this, but since you're already using flexbox, I would recommend continuing with that path.

On your .left-square-container div, simply change display to display:flex and then set align-items: center; and justify-content: center;.

Seems to work for me. Fiddle

score 0 · Answer 2 · answered Jul 14 '17 at 19:44

0

If you know the height of the container, you can set the line-height of said container to the value of its height.

I updated your CSS to look like so:

.icon {
  text-align: center;
  heignt: 100px;
  line-height: 100px;
}

answered Jul 14 '17 at 19:44

koralarts

2,062
4
30
48

Right it works, but when i test the notification on twitch it doesn't work. Any ideas? – SneakyShrike Jul 14 '17 at 19:50
There's probably something else that's affecting your styling that isn't in the sample code you presented. What I would suggest is debug it and see if something is overwriting your styling. – koralarts Jul 14 '17 at 19:52
On Twitch it just seems to disregard any centering at all and the image appears in it's default state in a top left postion. – SneakyShrike Jul 14 '17 at 19:54
Nevermind, another persons answer solved the issue, but i gave you an upvote as your answer did technically work. Thanks. – SneakyShrike Jul 14 '17 at 20:03

score 0 · Answer 3 · answered Jul 14 '17 at 19:51

The "icon" div does not have any specified height. It is declared block. Hence, you cannot expect to align an image inside this div vertically as the scope of the div height-wise on the screen will be only of the size of the image. Even in the in css of "icon", you have said margin:0 auto; -> The command will align the image in center not vertically but only horizontally. For what you want to happen, that 0 should be auto and then there should be some height of the div to see it align in the center vertically as well.

Can't vertically centre image, but horizontal works

3 Answers3