CSS how to position an element in a middle (half height / vertical 50%) of another element
Solution 1
This is pretty late but I tried to make an example on codepen which shows a working example if I understood your question correctly.
http://codepen.io/trgraglia/pen/RWbKyj
Use CSS transform.
For example, transform:translateX(-50%);
, will move an element left by 50% of ITSELF. Now you can align it to the parent with position
and bottom
or top
or left
or right
and then move it by the dimensions of itself.
Hope this helps!
Solution 2
using CSS & jQuery-
CSS
.div{
top:50%
}
jQuery
var divheight = $(.div).height() / 2;
$(.div).attr('style','margin-top:-'+divheight+'px;');
Solution 3
If you don't know both heights, there are only two ways:
- Set the parent
display: table
and childrendisplay: table-cell
andvertical-align: middle
. - Using CSS3 Flexbox: http://www.w3.org/TR/css3-flexbox/ but with limited browser support: http://caniuse.com/#search=flexbox
If you are interested in this topic, here there is a good article with more tips: http://www.vanseodesign.com/css/vertical-centering/
As you can see, the only way to vertical align an element without knowing its height and nor using CSS3 is using display: table-cell
.
Solution 4
If you know the height of the content the easiest way to center the tooltip is to set the line-height
of tooltip to the height of content.You can see how i did that here jsFiddle
Related videos on Youtube
elon
Privately, he is strongly connected and in love with correct and accessible html and css. Always on the front line in the fight for compatibility. I'm connecting the world of graphic designers, front-end developers and end-users.
Updated on September 23, 2020Comments
-
elon almost 4 years
I'm looking forward to build a tooltip which is positioned next to the element, but in a middle of it. It's easy to put it over and under and position it in the horizontal center of an element. But is there a way to do so vertically (on the right or left side of an element, vertically positioned in a middle of that element height)?
For my purpose, height of the element is fixed (known) & height of tooltip is not, because it can contain various text content. And a tooltip can be a child of element.
However, I'm also curious about, how to do it when both heights are not fixed (unknown and can vary depending on content). By heights I understand element's and tooltip's height. Width can be known and fixed.
-
Anthony Graglia almost 9 yearsNot sure where the downvote comes from. Maybe i wasn't clear in my example. Top for example uses the parent height. You can set 50% top on the tooltip and then translateY -50% to center it. Feel free to explain the downvote.
-
elon over 8 yearsQuestion was all about CSS only solution.
-
ggdx over 8 years@elon - and nearly three years ago. Busy evening?
-
Randy about 8 yearsThis transform property rocks! In modern browsers the support for this CSS tag is pretty good, check your browser support though if you are going to use this (old IE doesn't work... same old story)
-
Khateeb321 about 5 yearsFor me, this is the best solution.
-
Raymond Naseef about 4 yearsPlease do me a favor and put link to this SO question into your Pen, so I can find the question from bookmark to your pen. Thanks.
-
Anthony Graglia about 4 years@RaymondNaseef Done. Thanks for the suggestion.