0

I am trying to center an image for all mobile devices when page is loading.I am working with scss.This is my code:

.page-is-changing {
    .cd-logo {
        position: fixed;
        z-index: 4;
        background: url($image-base-path+"/common/logo.svg") no-repeat;
        top: 40%;
        animation: animatezoom 0.8s;
        left: calc(50% - 5.6rem);
        width: 11.3rem;
        height: 10%;
    }

    @media screen and (max-width: 780px) {
        .cd-logo {
            position: fixed;
            z-index: 4;
            margin: 0;
            background: url($image-base-path+"/common/logo-small.svg") no-repeat;
            top: 40%;
            left: 50%;
            width: 11.3rem;
            height: 10%;
        }
    }
}

But the problem is that the logo is coming ok for web application but not coming to the center in browser mobile devices.

Can you help me please to fix the issue,us for scss I can't put margin=auto

logo is not in center

Jina
  • 99
  • 1
  • 1
  • 9
  • 1
    Does this answer your question? [Center a DIV horizontally and vertically](https://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically) and from that duplicate I like this answer => https://stackoverflow.com/a/23703655/2008111 the most – caramba Nov 13 '19 at 18:19

2 Answers2

1

I highly recommend you use flexbox for centering. It's well supported now and simplifies vertical centering significantly.

Below is a snippet to review:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.logo {
  width: 5em;
  height: 5em;
  background-color: blue;
}
<div class="container">
  <div class="logo" />
</div>
Samuel Goldenbaum
  • 18,391
  • 17
  • 66
  • 104
0
.page-is-changing {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 780px) {
  .page-is-changing img {
    width: 80%;
  }
}

live example on codepen

Paul Hosler
  • 1
  • 2