CSS Responsive Center Div

Question

I would like to center some div which has background image. There is problem with response of this div, because if I set width on 80% and height on 80% the bg-image is not on center. I tried everything, but the picture can't just stand on center and if the browser is smaller or bigger this is very big problem.

So if you look at the picture

I want to make this white block responsive.

There is a little of css which I've already written, but for now is non-responsive:

top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;

Answer 1

Please try this:

img { max-width:100%; max-height:100%; margin:auto; }

Answer 2

You can use margin:0 auto; to center a div horizontally as long as its width is less than that of the container div.

Answer 3

I wanted to do the same thing 2 years ago, there's the solution:

Because you want it responsive, you may use the @media function in CSS3. Like this:

@media (max-width: 480px) {
    #div {
        top: 50%; /* IMPORTANT */
        left: 50%; /* IMPORTANT */
        display: block;
        position: absolute;
        background: url(images/background.png) no-repeat center center;
        width: 750px;
        height: 417px;

        margin-top: -208.5px; /* HALF OF THE HEIGHT */
        margin-left: -375px; /* HALF OF THE WIDTH */
    }
}

The max-width you use is the maximum width of the device screen. You just copy it and change the width, height, margin-left and margin-top for the image. Also, you should change the background tag!

It will center the image on the page.

You can see an exemple at: Créations MicroWeb - Carrières. The image is totally centered even if you change the window side.

You can add overflow: hidden; on the body to make the page unscrollable when the resolution is too low. Like I did.

EDIT: JSFiddle

Answer 4

I have used display: inline-block; on element to center and text-align: center; on parent div.

Answer 5

You could use CSS transform:

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Answer 6

Try with auto margins and display as table:

.your-class {
  margin-left: auto;
  margin-right: auto;
  display: table;
}