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

block on center

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;

score 20 · Answer 1 · answered Jan 26 '17 at 20:36

20

You could use CSS transform:

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

answered Jan 26 '17 at 20:36

Steve Glick

698
7
19

Frederick Marcoux · Accepted Answer · 2012-09-28T22:58:26.123

14

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

edited Sep 28 '12 at 22:58

answered Sep 28 '12 at 18:33

Frederick Marcoux

2,195
1
26
57

Responsive like Bootstrap? That the background resize with the device screen? – Frederick Marcoux Sep 28 '12 at 18:44
Yes, if someone have smaller screen to show smaller background picture and if someone have bigger screen to show it only full width/height picture and nothing more. – user1257255 Sep 28 '12 at 19:26
The div is really centered now, but there is still problem with response. If I set max-width, this means that div will disappear if someone with too big screen open up this site. I need to make smaller image when someone with small screen visit my site, but I don't know how to do that. Do I need JavaScript to check width and height of it's browser? – user1257255 Sep 29 '12 at 17:21
Yeah, with `max-width` it will. But you can also use `min-width` like `@media (min-width: 1280px) { }` and any screen size over this will show the image selected. – Frederick Marcoux Sep 29 '12 at 17:29

score 9 · Answer 3 · answered Sep 16 '15 at 13:56

9

Try with auto margins and display as table:

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

answered Sep 16 '15 at 13:56

monteirobrena

2,562
1
33
45

1

What is the theory behind this? – Phil Jun 18 '16 at 15:41
Why `display: table;`? – Daniel Kaplan Mar 17 '23 at 21:17

score 2 · Answer 4 · answered Sep 28 '12 at 18:25

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.

answered Sep 28 '12 at 18:25

thatidiotguy

8,701
13
60
105

2

yes, but the div should be absolute positioned, so this is not option. – user1257255 Sep 28 '12 at 18:27

score 2 · Answer 5 · answered Sep 28 '12 at 18:51

2

Please try this:

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

answered Sep 28 '12 at 18:51

suresh gopal

3,138
6
27
58

score 2 · Answer 6 · answered Oct 28 '20 at 11:25

2

.container{display: flex; justify-content: center; align-items: center}

answered Oct 28 '20 at 11:25

Dharmadurai

41
4

1

Please add a description note. why this answer helps op. – Parth Raval Oct 28 '20 at 12:28

score 1 · Answer 7 · answered Aug 13 '14 at 05:14

1

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

answered Aug 13 '14 at 05:14

kravits88

12,431
1
51
53

CSS Responsive Center Div

7 Answers7

Linked