CSS positioning to center plus x pixel

Question

Is there any way to use only CSS to positioning center plus x pixel a div?

I have now this CSS codes:

#mydiv {
    display: block;
    width: 200px;
    margin: 200px auto;
}

I want to position this div to center + 300px to right. It is possible to do using only CSS?

(I know here is a way to using jQuery, but I want to do using only CSS.)

Answer 1

You could achieve this by adding transform: translateX(300px); to #mydiv.

Take a look on JSFiddle DEMO

#mydiv {
    display: block; 
    width: 200px; 
    margin: 200px auto; 
    transform: translateX(300px); 
} 

Answer 2

Yes, it is, for browsers that support CSS3 calc().

#mydiv {
    display: block;
    width: 200px;
    margin-left: calc(50% + 200px); /* 50% - 100px (half of the div) + 300px */
}

    #mydiv {
      display: block;
      width: 200px; height: 50px;
      margin-left: calc(50% + 200px);
      /* 50% - 100px (half of the div) + 300px */
      background: blue;
    }

<div id="mydiv"></div>