css position absolute off center to the left

Question

I'm trying to position a div box off center and to the left. It must be absolute positioning and I can't wrap it within another div as it's generated by a very long js script.

Here's my css so far:

.nivo-html-caption {
  position:absolute;
  top:59px;
  opacity:0.8;
  transition:all 0.8s ease-out;
  background-color: rgba(0,0,0,0.24);
  width: 350px;
  color: #cbcbcb;
  padding: 10px;
  margin:auto;
}

I'm using the margin:auto; to center it and the top:59px; to push it down from the top. But I now need to push it off center to the left about 300px.

I'm not quite sure how to do this without wrapping it in another div or putting another div inside it (which I really don't want to start doing as it's going to take a lot of messing around)

Answer 1

Your request is a little unclear but you first need to center the item and then move it over 50% of the required adjustment.

.nivo-html-caption {
    position:absolute;
    top:59px;
    left:50%; 
    transform:translateX(-50%); /* centered first regardless of width*/
    margin-left: -175px; /* then moved over */

.parent {
    position: relative;
    height: 500px;
    border:1px solid green;
}
.nivo-html-caption {
    position:absolute;
    top:59px;
    left:50%;
    transform:translateX(-50%);
    margin-left: -175px;
    opacity:0.8;
    transition:all 0.8s ease-out;
    background-color: rgba(0, 0, 0, 0.24);
    width: 350px;
    color: #cbcbcb;
    padding: 10px;
}
.center {
    position: absolute;
    top:0%;
    left:50%;
    height: 100%;
    width: 1px;
    background: red;
}

<div class="parent">
    <div class="nivo-html-caption"></div>
    <div class="center"></div>
</div>

Answer 2

As it's positioned absolute, instead of centering it using margin: auto, try this:

left: 50%;
margin-left: -175px;

This will centre it and adjusting the margin-left will take it off centre.