Поместите Resizable Pop-up Box в центр экрана без использования ширины в процентах

Question

Поместите Resizable Pop-up Box в центр экрана без использования ширины в процентах

Ожидаемые результаты:
1) Если Browser & Box имеет такую ??же ширину, поле должно выглядеть следующим образом:

2) Если размер браузера изменяется (растягивается) примерно до 800 пикселей, то Box (около 600 пикселей) должен находиться в центре экрана, как показано ниже:

3) Если размер браузера изменен (увеличен) до полного экрана, тогда в поле ширины полного размера : 900 пикселей будет находиться в центре экрана, как показано ниже: введите описание изображения здесь

Благодарю.

10

0

Вы должны вычесть край

.pop-box {
   position: absolute;
   top: 0;left: 0;bottom: 0;right: 0;
   margin: auto;
   width: 890px;
   height: 490px;
   border: 5px solid black;
   background: orange;
 }
 @media (max-width:600px) and (min-width:0) {
   .pop-box {
     background: green;
     width: 490px;
     height: 190px;
   }
 }
 @media (max-width:800px) and (min-width:601px) {
   .pop-box {
     background: red;
     width: 590px;
     height: 90px;
   }
 }

<div class='pop-box'></div>

HTML, CSS, CSS3, медиа-запросы,

html,css,css3,media-queries,

0

Ответов: 1