title: how to set absolute position of images relative to screen center
body: <p>I try to set up a simple landing page for my website, and there will only be 5 images, ordered in a pentagon-like form. (the images will be at pentagons edges each).
  so instead of 5 images in a line or a row, there are 5 images in a "circle".</p>
  
  <p>I was able to set the images in a responsive layout in the positions i want them, they are resizing on smaller screens and even the positions of the images are responsive.</p>
  
  <p>but here begins the problem. the position of the images are set relative to the screen-borders </p>
  
  <pre><code>position: absolute; top: 50% left: 25%
  </code></pre>
  
  <p>for the first image, and so on for the other 4 images, in order to get them in positions of the five edges of a pentagon</p>
  
  <p>when resizing the browser window the distance from one image to the other changes, of course this is because the position are set in relation to the window-borders.</p>
  
  <p>and the order of the images of course breaks, until they will appear either to distant form each other or to close to each other.</p>
  
  <p>is there no way to set images position in a absolute position in relation to a pre-set point on screen, such as the absolute center of the screen? </p>
  
  <p>the five images should be responsive, but the order of the images and their distance to each other should always be in the same relation! (in order to keep the images in a circle, or otherwise said at the five edges of the pentagon)</p>
  
  <p>right now I use following code with inline style, which looks great on a 980*1280px screen, but on smaller or bigger screens the position of the images is not anymore in the desired "pentagon" order:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              body{
                  background-color: #000;
              }
  
              .overlay1 {
                  width: 10%;
                  position: absolute;
                  top: 50%;
                  left:25%;
                  -webkit-transform: translate(-50%, -50%);
                  -moz-transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);
                  -o-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
              }
  
              .overlay2 {
                  width: 10%;
                  position: absolute;
                  top: 25%;
                  left: 50%;
                  -webkit-transform: translate(-50%, -50%);
                  -moz-transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);
                  -o-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
              }
  
              .overlay3 {
                  width: 10%;
                  position: absolute;
                  top: 50%;
                  left: 75%;
                  -webkit-transform: translate(-50%, -50%);
                  -moz-transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);
                  -o-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
              }
  
              .overlay4 {
                  width: 10%;
                  position: absolute;
                  top: 75%;
                  left: 37.5%;
                  -webkit-transform: translate(-50%, -50%);
                  -moz-transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);
                  -o-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
              }
  
              .overlay5 {
                  width: 10%;
                  position: absolute;
                  top: 75%;
                  left: 62.5%;
                  -webkit-transform: translate(-50%, -50%);
                  -moz-transform: translate(-50%, -50%);
                  -ms-transform: translate(-50%, -50%);
                  -o-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;img src="site.com/content/uploads/2014/08/site-logo-vector- 280x280.png" class="overlay1" /&gt;
          &lt;img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay2" /&gt;
          &lt;img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay3" /&gt;
          &lt;img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay4" /&gt;
          &lt;img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay5" /&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE UPDATE UPDATE:</p>
  
  <p>i edited following code (changed HTML as follows):</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri" /&gt;
      &lt;img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri1" /&gt;
      &lt;img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri2" /&gt;
      &lt;img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri3" /&gt;
      &lt;img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri4" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>(changed CSS as follows):</p>
  
  <pre><code>    .container{
      height: 100vh;
      max-width: 100vh;
      border: 1px red solid;
      position: absolute;
      top: 0%;
      left: 0%;
      }
  
      img.ri
      {
      position: relative;
      max-width: 25%;
      }
      img.ri:empty
      {
      top: 23%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
      img.ri1:empty
      {
      top: 50%;
      left: -5%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
      img.ri2:empty
      {
      top: 50%;
      left: 25%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
      img.ri3:empty
      {
      top: 60%;
      left: 30%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
      img.ri4:empty
      {
      top: 60%;
      left: 40%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      }
  </code></pre>
  
  <p>now everything is good, but i want the container to show always in the center of viewport (width only)</p>
  
  <pre><code>     (position: absolute; left:50%; )
  </code></pre>
  
  <p>my image.ri:empty is obviously not working for .container (works only with elements with no children's!!!!!!)</p>
  
  <p>does anybody have any idea how to center this?</p>
  
  <pre><code>     position: absolute; left:50vw; 
  </code></pre>
  
  <p>does not work as well.</p>
  
  <p>the problem is obvious :</p>
  
  <p>"Take note of the selector: img.ri:empty — empty is a structural pseudo-class which only matches elements which have NO children (an image should never have any). This is a CSS3 selector so IE8 and below will not parse the declaration. We could have used an alternative, such as Conditional Comments, but this seems a far more efficient solution and requires just six additional characters."</p>
  
  <p>so how can i set a CONTAINER to a REAL center of the screen-width?</p>