Как идеально сверстать такой дизайн?

Question

[GandalfWhiteGO]

Как сверстать такой дизайн что бы в горизонтальном и вертикальном режиме div всегда был по центру, а кнопки меняли свое положение как на картинке.


и возможно ли сделать такое без media ?

Comments

[ambisinister One]

GandalfWhiteGO, С пустым дивиксом можно, а если внутри находится изображение или ещё что-нить, то тоже можно, но тогда бы знать заполнение...)
Что там будет?

[GandalfWhiteGO]

Секрет фирмы)
А если серьезно это простой слайдер, в центре картинка, а через кнопки буду менять картинки вперед(Button 1) и назад(Button 2).

Answer 1

[ne0kaz]

Без Media возможно
HTML:

<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;

Вроде так

Comments

[GandalfWhiteGO]

Спасибо за ответ
Но всетаки думаю нужно 2 разных дизайна и переключение через медиа.

Так как в случае с position: absolute на малых экранах иногда кнопка может перекрыть блок в центре.

[Ankhena]

GandalfWhiteGO, угу, потому что без media вниз они не сползут при таком абсолюте.
Но и не очень ясен страх media.

Answer 2

[ivan448]

Через flex и задать order по media screen