Hello!) How in this situation to position the forest in the center of the center?

<html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="fon1"><img src="fon1.png"/></div> <div class="fon2"><img src="fon2.png"/></div> <div class="forest"> <div class="main"></div> </div> </body> </html> div.fon1 { position: absolute; left: 0px; } div.fon2 { position: absolute; right: 0px; } div.forest { position: absolute; border-radius: 5px; box-shadow: 0px 5px 15px #000; background-image: url("1.jpg"); background-repeat: repeat; padding: 2%; } div.main { width: 800px; height: 600px; background: white; border-radius: 5px; box-shadow: 0px 5px 15px #000; }

Thank!

    1 answer 1

    Something like this?

     <div class="fon1"><img src="fon1.png"/></div> <div class="fon2"><img src="fon2.png"/></div> <div class="wrapper"> <div class="forest"> <div class="main"></div> </div> </div>

    and

     div.fon1 { position: absolute; left: 0px; } div.fon2 { position: absolute; right: 0px; } div.forest { position: absolute; border-radius: 5px; box-shadow: 0px 5px 15px #000; background-image: url("1.jpg"); background-repeat: repeat; padding: 2%; margin: 0 auto; } div.main { width: 100px; height: 50px; background: white; border-radius: 5px; box-shadow: 0px 5px 15px #000; } .wrapper { margin: 0 auto; width: 100px; }
    • If something I added a wrapper block, into which I placed the forest, and also specified a width for the wrapper equal to the width of the forest (more precisely, main) and margin: 0 auto; - Drakmail