How to make a fixed div with a width of 50% and a height of 50% of the visible area of ​​the browser window.

It is necessary that the block would remain in place when scrolling. It is necessary that the block sizes are always the same. Regardless of the zoom on mobile devices.

Ie, the user zooms the page with his fingers, the content of the site increases / decreases and this div hangs over the entire site and always occupies 50% of the width and height of the screen regardless of the zoom.

  • can, position: fixed, height: 50vh, width: 50vw; ? - Furry Cat
  • or maybe even height: 50%; width: 50% will work with fixed positioning - Furry Cat

1 answer 1

.block{ position: fixed; width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-color: black; /*чтоб было видно блок*/ }