Bootstrap - how to center a div from right left top and bottom?

Question

Using Bootstrap - how can I center a div from right, left, top, and bottom, plus be able to make picture responsive? I tried this:

#logo{
    position:absolute;
    top: 50%;
    left: 50%;
    width:500px;
    height:200px;
    margin-top: -100px; /*set to a negative number 1/2 of your height*/
    margin-left: -250px; /*set to a negative number 1/2 of your width*/
} 

But it disabled the img-responsive. Is there is any solution to make them both work?

Answer 1

Here's solution

#logo{
    position:absolute;
    top:50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-width: 500px;
    transform: translate(-50%,-50%);
}