Center items vertically and horizontally

Question

I want to center some items. I used display: flex and justify-content: center but it didn't work so far. How can I achieve horizontal and vertical alignment?

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

` .text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 16px;
  padding: 16px 32px;
}

<div class="main-blog-img">
  <img src="img/images/Asset2.png" class="image">
  <a href="">
    <div class="middle">
      <div class="text"><i class="fa fa-plus"></i></div>
    </div>
  </a>
</div>`

Does this answer your question? [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) — I Stand With Israel, Aug 18 '21 at 07:47
horizontally or virtually or both? and do you want to center the img either? — Nuha Al-sameai, Aug 18 '21 at 07:58
both on the image. I dont want want to center the iimage just the text on the top of it when I hover it. — pattes, Aug 18 '21 at 08:17

score 0 · Answer 1 · answered Aug 18 '21 at 07:47

0

This question has answered many times. See here, for example. How to horizontally center an element

Your problem is that you need to make the parent div a flex container.

.middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

answered Aug 18 '21 at 07:47

I Stand With Israel

1,971
16
30

score 0 · Answer 2 · answered Aug 18 '21 at 07:53

Change your style with

   .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
color: black;
font-size: 16px;
padding: 16px 32px;
}

Center items vertically and horizontally

2 Answers2