I have input with set height and width of it in the center of the site (imagine Google) and need its position to be vertically responsive based on the height of the browser window. I was looking for a solution, but couldn't find it.
input {
max-height:4em;
max-width: 25em;
outline: none;
}
One way is to use CSS3 translateY like this..
input {
max-height:4em;
max-width: 25em;
margin:0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
http://codeply.com/go/94MsX6EnaO
Make the element position:absolute with a top:50%
Set a height, and a minus margin-top which should be 50% of the height.
How?
The top:50% will push the element top to 50%. But since you want the middle of the element to be in the middle and not the top, you use a negative margin-top to pull the element up the half of it's height.
HTML
<div>
MIDDLE ME
</div>
CSS
div {
height:30px;
top:50%;
position:absolute;
margin-top:-15px;
}
Example:
http://jsfiddle.net/bpa6qgu6/
More detailed: http://jsfiddle.net/bpa6qgu6/1/
Another solution is using jQuery's innerHeight() to set the margin-top;
Related
How can I use CSS calc() or a preprocessor to center an absolutely positioned element horizontally, regardless of the element's width? Something to the effect of:
.elem {
position: absolute;
left:50%;
margin-left: calc(-.5 * elem.width);
}
I want to keep a class of absolutely positioned elements, whose widths are dynamic, centered horizontally relative to their parent divs.
To horizontally center an absolutely positioned element with left:50%; Use translateX.
.elem {
position: absolute;
left:50%;
transform: translateX(-50%);
/*To align Vertically and Horizontally
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
*/
}
I have an slider, which include navigation dots positioned by absolute value. And I want to know how to center those dots by X axis.
Im fine when it's set right: 10%; at the desktop layout.
But mobile have an esthetic issues when the values in %, it just never looks right in the center because of small width.
I have searched a lot, and most popular solution was
left: 50%;
right: 50% transform: translateX(50%);
But still it works just as left.. Please have an look on jsfiddle code below, I need space between 2nd and 3rd white dot to be cut by white vertical line.
https://jsfiddle.net/dpmango/vk9oc6gt/2/
Thank you for helping in advance!
https://jsfiddle.net/vk9oc6gt/3/
transform:translateX(-50%); is what you're looking for.
Notice when you apply transform:translateX(-50%); it shifts the element by a percentage of the element's dimensions, in this case the width because it's an X axis translate, 50% because we specified it and to the left because it's a negative value.
I added it in both the middle dots div and the middle white line:
.center-line {
position: absolute;
background-color: white;
top: 0;
left: 50%;
transform:translateX(-50%);
width: 2px;
height: 100%;
}
.owl-dots {
display: inline-block;
position: absolute;
top: 80px;
left:50%;
transform:translateX(-50%);
}
If you need vertically centered dots too, you can go with this https://jsfiddle.net/vk9oc6gt/4/ using:
top:50%;
left:50%;
transform:translate(-50%, -50%);
why dont u use this? - .owl-dots{width: 100%, text-align:center; left:0;}
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, but that's not the case.
Sometimes when I put left 50% for something, the div looks as if it's slightly more than that (relative to browser). 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, and what property for position would I need to put? I just don't understand why position:relative and left:50% won't make my div go to the center of the page.
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.
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).
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 to 50%
}
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.
I have a little problem trying to vertically center a child div inside its parent. I'm using this mixin:
#mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
But it seems that the "top: 50%" instruction is not working. I think that it may be because the parent div height is set to auto (it only has "min-height: 100%").
Any idea of how I can solve this problem?
Thanks in advance!
Make sure the parent element has position: relative and change your code (the child element to be centered) to position: absolute. That should to the trick. Also take a look at this article on centering in CSS. Hope this helps!
I've got an absolutely positioned child inside a relatively positioned parent. The child is supposed to appear vertically centered next to the parent. See this jsFiddle: http://jsfiddle.net/wAY3T/
The problem is that both the parent's and the child's heights are unknown at design-time, so I tried using percentages with the negative margin method, but the outcome goes completely insane and I can't figure out what's wrong with my code.
HTML:
<div class=parent>
<div class=child>Absolute div</div>
Some content of the parent
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
right: 100%;
top: 50%;
margin-top: -50%;
}
The child then displays somewhere far on top of the parent, even though the code looks like it would vertically center it. In the fiddle, the -50% margin calculates to -112px. WTF?
If you have any idea what's going on, please help me. I've been struggling for hours.
Percentage margin is always relative to the containing block's width, so this won't work like you expect.
If you're open to an alternative, I suggest instead using:
.parent {
position: relative;
}
.child {
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
right: 100%;
top: 50%;
}
Updated fiddle (this is supported quite well except for IE8)