badbye badbye - 2 months ago 7x
CSS Question

Javascript: show the element in the middle of screen doesn't work with fixed postion

I need the element vertically on the middle of the screen when the button is clicked, and no matter how browser's height is adjust, it will always in the middle.

<script src=""></script>
<button id="button">click me</button>
<div id="element">balah</div>

position: fixed;
color: red;

I tried:




No need to use JS, this can be done with pure CSS;

.fixed {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);