填充居中div周围的剩余宽度和高度

Question

Is it possible to fill the remaining screen space around a div that is centered on the screen like so:

The red div has the following properties as I would like to keep the same aspect ratio and have it in the center of the screen:

position: absolute;
height: 80%;
width: auto;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);

Is it possible to adjust the 4 surrounding divs dynamically to fill the remaining space on the screen?

EDIT: The red div is a transparent image

Answer 1

I don't agree a lot with the other solution as the question was to fill remaining spaces and the answer simply provided equal rows and in the second row equal columns. So it's clear that the 4 surrounding divs are not filling the remaining space.

I think this is what you need:

1. Solution with 2 surrounding divs and pseudo element (use fixed height/width for the image or simply keep the original size) :

 body { margin: 0; height: 100vh; display: flex; flex-direction: column; } .top, .bottom { flex: 1; background: blue; } .middle { display: flex; } .middle:before, .middle:after { content: ""; flex: 1; background: green; } img { opacity:0.6; } 

 <div class="top"> </div> <div class="middle"> <img src="https://lorempixel.com/200/100/"> </div> <div class="bottom"> </div> 

2. Solution with 4 surrounding divs (use fixed height/width for the image or simply keep the original size) :

 body { margin: 0; height: 100vh; display: flex; flex-direction: column; } .top, .bottom { flex: 1; background: blue; } .middle { display: flex; } .right, .left{ flex: 1; background: green; } img { opacity:0.6; } 

 <div class="top"> </div> <div class="middle"> <div class="left"></div> <img src="https://lorempixel.com/200/100/"> <div class="right"></div> </div> <div class="bottom"> </div> 

3. Solution without surrounding divs where you can set % height :

 body { /* 100vw = the width of the screen*/ /* 200 = initial width of the image*/ /* 100 = initial height of the image*/ /* 40vh = the % we specified in the image (40%) but used with vh unit */ --main-start: calc((100vw - ((200 / 100) * 40vh)) / 2); --main-end: calc(var(--main-start) + ((200 / 100) * 40vh)); margin: 0; height: 100vh; display: flex; flex-direction:column; justify-content: center; align-items: center; background:linear-gradient(to right,green var(--main-start),transparent var(--main-start),transparent var(--main-end),green var(--main-end)); } body:before, body:after { content: ""; flex: 1; background:blue; width:100%; } img { height: 40%; opacity:0.6; } 

 <img src="https://lorempixel.com/200/100/"> 

4. Solution without surrounding divs where you can set % width :

 body { /* 100vh = the height of the screen*/ /* 200 = initial width of the image*/ /* 100 = initial height of the image*/ /* 40vw = the % we specified in the image (40%) but used with vw unit */ --main-start: calc((100vh - ((100 / 200) * 40vw)) / 2); --main-end: calc(var(--main-start) + ((100 / 200) * 40vw)); margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-image:linear-gradient(green var(--main-start),transparent var(--main-start),transparent var(--main-end),green var(--main-end)); } body:before, body:after { content: ""; flex: 1; background:blue; height:100%; } img { width: 40%; opacity:0.6; } 

 <img src="https://lorempixel.com/200/100/"> 

UPDATE

Since the OP will use transparent image and want the colored background to stay, I added in the 2 last solutions linear-background to create a transparent gap below the image since i didn't use any other elements.

Answer 2

 .container { display: flex; flex-direction: column; width: 100vw; height: 100vh; } .row { display: flex; flex-direction: row; width: 100%; flex: 1; border: 1px solid red; } .box { flex: 1; border: 1px solid green; text-align: center; } 

 <div class="container"> <div class="row"> </div> <div class="row"> <div class="box"> </div> <div class="box"> HERE ! </div> <div class="box"> </div> </div> <div class="row"> </div> </div> 

How about using display: flex ?

You can make responsive layout easily.