Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
EXAMPLE HERE
.child { position: absolute; top: 50%; /* position the top edge of the element at the middle of the parent */ left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */ }
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted for brevity)
Explanation Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.
This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).
While a percentage value on translate() transform function is relative to width/height of the element itself (Actually it refers to the size of bounding box).
For unidirectional alignment, go with `translateX(-50%) or translateY(-50%)` instead.
Read [here][1] for more info

[1]: https://thoughtbot.com/blog/positioning

Without knowing the `width`/`height` of the positioned¹ element, it is still possible to align it as follows:
**[EXAMPLE HERE][1]**
<!-- language: lang-css -->
.child { position: absolute; top: 50%; /* position the top edge of the element at the middle of the parent */ left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */ }
It's worth noting that [CSS Transform][2] [is supported in IE9 and above][3]. *(Vendor prefixes omitted for brevity)*

----------
## Explanation
Adding [`top`][4]/[`left`][5] of `50%` moves the top/left margin edge of the element to the middle of the parent, and [`translate()`][6] function with the *(negative)* value of `-50%` moves the element by the half of its size. Hence the element will be positioned at the middle.
This is because a percentage value on [`top`][7]/[`left`][8] properties is relative to the height/width of the parent element (which is creating a containing block).
While a percentage value on [`translate()`][9] [transform][10] function is relative to width/height of the element itself *(Actually it refers to the size of [bounding box][11])*.
For unidirectional alignment, go with `translateX(-50%)` or `translateY(-50%)` instead.

----------
^{1. An element with a `position` other than `static`. I.e. `relative`, `absolute`, `fixed` values.}
[1]: http://jsfiddle.net/hashem/n3rspnbh/ [2]: http://dev.w3.org/csswg/css-transforms [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility [4]: https://developer.mozilla.org/en-US/docs/Web/CSS/top [5]: https://developer.mozilla.org/en-US/docs/Web/CSS/left [6]: http://dev.w3.org/csswg/css-transforms/#funcdef-translate [7]: http://www.w3.org/TR/CSS2/visuren.html#propdef-top [8]: http://www.w3.org/TR/CSS2/visuren.html#propdef-left [9]: http://dev.w3.org/csswg/css-transforms/#funcdef-translate [10]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform [11]: http://dev.w3.org/csswg/css-transforms/#bounding-box