Can't adjust div position?

Question

I'm having an issue that I'm sure is my fault somewhere. I can't get the divs to move the way I want them to. I am trying to make Div GIS1 centered directly in the middle of the page, but when I put it at 50% it goes past the middle of the page.

http://jsfiddle.net/380vbxqe/

#wrapper {
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    position:absolute;
}

#GIS1_text{
    vertical-align:middle;
}
#GIS1{
    margin-top: 10%;
    margin-left: 50%;
    width:50%;


}
#street_thumb{
    vertical-align:middle;
    max-height: 300px;
    max-width: 400px;

}

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — JJJ, Nov 30 '15 at 09:32
I'm trying to do it with percentages only to make it dynamic. (works on all platforms) — Neo, Nov 30 '15 at 09:33
That doesn't make any sense. The method described in the duplicate question is a) dynamic and b) works on all platforms. — JJJ, Nov 30 '15 at 09:34

score 2 · Accepted Answer · answered Nov 30 '15 at 09:34

2

margin-left: 50%;

means the div starts at the middle of the page, not that it's centered.

Try using

margin: auto;

instead

Updated fiddle (border on div to show whole size)

answered Nov 30 '15 at 09:34

JNF

3,696
3
31
64

Wow, thanks for the fast response. One more question for you: the image won't center inside its div (street_thumb inside GIS1). Any idea? http://jsfiddle.net/380vbxqe/7/ – Neo Nov 30 '15 at 09:46
1

Try giving the `div` a `text-align: center;` – JNF Nov 30 '15 at 09:50

score 1 · Answer 2 · answered Nov 30 '15 at 09:33

1

You're probably looking for

margin-left: auto;
margin-right: auto;

On the div you want to center.

answered Nov 30 '15 at 09:33

Wout De Rooms

647
4
10

Wouldn't `margin: auto;` be better? – Yuriko Nov 30 '15 at 09:40
Since the OP set the divs margin-top to 10%, I assumed he only wanted to center it horizontally. – Wout De Rooms Nov 30 '15 at 10:00
As far as I know, `margin: auto` [does not affect vertical margin](https://developer.mozilla.org/fr/docs/Web/CSS/margin#Valeurs). :) – Yuriko Nov 30 '15 at 10:03
1

You are correct, however it would still overwrite the margin-top value if it was set before. – Wout De Rooms Nov 30 '15 at 10:05

score 1 · Answer 3 · answered Nov 30 '15 at 09:37

1

Just add margin:auto in GIS1:

#GIS1
{
  margin:auto;
  width:50%;
}

See Updated Fiddle

answered Nov 30 '15 at 09:37

Insane Skull

9,220
9
44
63

Can't adjust div position?

3 Answers3