Centering a div in middle of page on resize of page

Question

I am currently trying to get a div to center in the middle of my page. I get it centering in the middle but I am having a problem when I resize the page. When I make the window as small in width as I can, the div goes off the left of the page. Here is a jsfiddle representing what I have:

https://jsfiddle.net/ghsxnsqy/

Here is some css:

.wrapper{
    top: 50%;
    left: 50%;
    width:200px;
    height:60px;
    margin-top: -30px; /*set to a negative number 1/2 of your height*/
    margin-left: -100px; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    position:fixed;
}

Now if you look at that and resize the window to make it as small as you can in width, you can see the div going off to the left. How do I make it stop at the edge of the page? I can't find a way without using margin auto. Any suggestions?

Which browser are you using as it seems to work fine here. I am using Firefox. — Senjuti Mahapatra, Dec 11 '15 at 05:16
I have checked in Firefox, Chrome and IE 11 as well. I works fine on all of these browsers. — Senjuti Mahapatra, Dec 11 '15 at 05:20
When you resize the width of the window to the smallest, half the div doesn't keep going to the left with it? — user081608, Dec 11 '15 at 05:21

ketan · Answer 1 · 2015-12-11T05:21:40.430

0

Remove:

margin-left: -100px;
margin-top: -30px;

And apply transform: translate(-50%); to wrapper class.

-webkit-transform: translate(-50%); for webkit browser like chrome.

Updated Fiddle

edited Dec 11 '15 at 05:21

answered Dec 11 '15 at 05:18

ketan

19,129
42
60
98

When I do this I still goes past the left side of the screen. I want it to stop once it hits the left part of the screen. Sorry if I wasn't clear. I tried on firefox and chrome on two different monitors and it didn't work. – user081608 Dec 11 '15 at 05:21
apply webkit for browser like chrome. Check fiddle – ketan Dec 11 '15 at 05:22
That didn't work either. Maybe something is just wrong with me. So if you added a long string in that div, none would get cut off because it moved left past the screen size? – user081608 Dec 11 '15 at 05:23
don't make screen less than `200px` otherwise it doesn't warp. – ketan Dec 11 '15 at 05:25
@user081608 You have given fixed width and height. you want like: https://jsfiddle.net/ghsxnsqy/3/ ? – ketan Dec 11 '15 at 05:27
That doesn't go off the page for me but I didn't want it to warp. Is there a way to check if the distance from the left of the page is zero then make it stop? – user081608 Dec 11 '15 at 05:29
So, you want to restrict window to resize? Chrome can not resize below `400px` width. Check http://stackoverflow.com/questions/8681903/browser-doesnt-scale-below-400px. Otherwise there is no solution for it. – ketan Dec 11 '15 at 05:38
Or try to set `min-width` of body. – ketan Dec 11 '15 at 05:40

score 0 · Answer 2 · answered Dec 11 '15 at 05:29

0

You want to set a few CSS properties.margin: auto; width: ;set the width to your desired width/percent. It will automatically make the margin on the left and right side equivalent.

answered Dec 11 '15 at 05:29

Nicholas Johnson

1,012
2
12
35

Yes I've tried that before but when you have something like the developers panel pop up on the bottom of the page, it moves up and down. I want it to stay fixed even if a panel were to pop up. – user081608 Dec 11 '15 at 05:32
@user081608 not sure if there is a way, but I added a Css property to my background that kept it the same position even while scrolling. Background-attachment: fixed; – Nicholas Johnson Dec 11 '15 at 05:38

score 0 · Answer 3 · answered Dec 11 '15 at 05:52

So I suppose you want either this push-to-right-instead solution or this resize-instead solution.

Both involve wrapping your actual element inside a container:

<div class="container">
  <div class="wrapper">

  </div>
</div>

And centering horizontally using text-align:

.container{
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -30px;
    position:fixed;
    text-align: center;
}
.wrapper{
  ...
  display: inline-block;
}

Centering a div in middle of page on resize of page

3 Answers3