How to perfect such a design?

Question

css

How to make such a design so that in the horizontal and vertical mode the div is always in the center, and the buttons change their position as in the picture.


and is it possible to do this without media ?

Answer 1

Without Media,
HTML is possible:

<div class="container">
   <div class="div">Div</div>
   <div class="buttons">
      <button>Button1</button>
      <button>Button2</button>
   </div>
</div>

CSS:

.container{
   display: flex;
   align-items: center;
  justify-content: center:
}
.buttons{
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;    /* не обязательно*/
   right: 0;    /* не обязательно*/
   height: 100vh;
   width: 100vw;

Like so

Answer 2

Via flex and set order by media screen