I have the following style for a div which is positioned in the center of the page

```
<div class="myStyle">Hi All...</div>

```

CSS Code:

```
<style>
.myStyle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

```

when the virtual keyboard though opens up, the div is being pushed up. I don't understand why though. Any suggestions ?