CSS how to position an element in a middle (half height / vertical 50%) of another element
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!
using CSS & jQuery-
CSS
.div{
top:50%
}
jQuery
var divheight = $(.div).height() / 2;
$(.div).attr('style','margin-top:-'+divheight+'px;');
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
.