How to make the element, which is set to position: absolute , when the browser window is reduced in width to shift to the center, like all other elements?

 .logo { width: 200px; height: 200px; border-radius: 100px; background-color: #244c5f; position: absolute; top: 0; right: 101px; left: 900px; text-align: center; font: 24px/8 Helvetica, Arial, sans-serif; color: azure; } 
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>1</title> </head> <body> <div class="logo">hhhhhhhhhhhhhhh</div> </body> </html>
  • Add code to the question. - edem
  • 2
    indicate top and left in% - vital mar

1 answer 1

For example:

 * { box-sizing: border-box; } .box { max-width: 300px; width: 100%; padding: 5rem 2rem; background: #ccc; margin: 2rem auto; text-align: center; } .wrap { position: relative; } .abs { position: absolute; left: 0; right: 0; } 
 <div class="box">Обычный блок</div> <div class="wrap"> <div class="box abs">Блок с position: absolute;</div> </div>