title: Is there a way to position something based on the centre of the screen (horizontally) with CSS?
body: <p>I'm wondering if there's a simpler way to do this:</p>
  
  <ol>
  <li>Position something centre-screen horizontally (easy).</li>
  <li>Offset it's position from the centre.</li>
  </ol>
  
  <p>I normally achieve this by making a <code>&lt;div&gt;</code> with a width double of the amount I want to offset by, set it to <code>margin: auto;</code> and then put my desired element within this floated either left or right. This works fine, I just thought there might be a shorter way.</p>
  
  <p>An an example, I might want to have a <code>&lt;div&gt;</code> positioned 80px to the left of the centre of the screen, like this:</p>
  
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://i.stack.imgur.com/sCTWn.png" alt="enter image description here"></p>