How To Compensate For Left,top,bottom, Right In Css

I've been looking very hard and I see many examples where people will have left or top or something like that at 50%, and I'd expect that would be sufficient to center anything, bu

Solution 1:

When absolute positioning an element using top, right, bottom and left you're moving it a certain distance from that elements edges. It will move it in relation to the last positioned element. The last position element is the next ancestor element that has any type of positioning applied to it via CSS. If no ancestor element as positioning set then the viewport window will be used as a reference.

I created a quick diagram to show what is going on.

left: 50%; moves the element's left edge 50% (half) of the width of the last positioned element's left edge. You're effectively moving elements to the right by adding space between element left edges.

margin-left: <negative value>; is set to half the element's width pulling it back to the left. This fixes the off center issue you're seeing.

Today a lot of people will forgo using margin-left with a negative value and opt for transform: translateX( -50% );. This allows them to be more flexible as the elements width does not need to be known.

The CSS for transform: translateX( -50% ); might look like this:

div {
  position: absolute;
  left: 50%;
  border: 2px dashed red;
  width: 200px;
  height: 100px;
  transform: translateX( -50% );
}

Demo JSFiddle.

If you're looking to simply center something horizontally and you have applied a width (px, %, etc. work) then you can use margin: 0 auto; width: <width value>;. A width must be set for margin: 0 auto; to work!

Example:

div {
    margin: 0 auto;
    width: 25%;
    height: 100px;
    border: 2px dashed red;
}

Demo JSFiddle.

Solution 2:

Sometimes when I put left 50% for something, the div looks as if it's slightly more than that(relative to browser).

It positions the left edge at the 50% point.

So then they have negative margins and I'm just wondering how do you know what values to put in order to center the elements

Half of whatever the width is

what property for position would I need to put?

That technique generally assumes absolute positioning

---

I just don't understand why position:relative and left:50% won't make my div go to the center of the page.

Relative positioning offsets the element from its static position. Generally, any time you want to try to centre something with relative positioning you would be better off with setting the left and right margins to auto (and leaving the positioning as static).

Solution 3:

That's because it positions the top-left corner at 50%. You should use the translate:

.centered {
    position: absolute; 
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    // this moves the center of centered item to50%
}

Solution 4:

When you apply left: 50% its in fact the left edge of your element which is centered. Not the middle of your element. apply margin:auto; to your element to center it.