{"id":992,"date":"2014-04-25T13:45:49","date_gmt":"2014-04-25T20:45:49","guid":{"rendered":"http:\/\/www.cassandraking.net\/wordpressapp\/?p=992"},"modified":"2014-04-25T13:45:49","modified_gmt":"2014-04-25T20:45:49","slug":"css-tricks-to-center-absolutely-positioned-elements-of-variable-height","status":"publish","type":"post","link":"https:\/\/www.cassandraking.net\/wordpressapp\/css-tricks-to-center-absolutely-positioned-elements-of-variable-height\/","title":{"rendered":"CSS Tricks to Center Absolutely Positioned Elements of Variable Height"},"content":{"rendered":"

\"CSS\"<\/a>These are some really clever solutions prompted by a discussion on the Front End Developers Group in LinkedIn<\/a><\/p>\n

Question posed:<\/strong><\/p>\n

Have you ever needed to centralize an absolute element (horizontal and vertical), but the height was variable?<\/p><\/blockquote>\n

Some really interesting solutions \u00c2\u00a0and the browser support for each one. I list a few of the tried and tested methods at the end.<\/p>\n

Solution One:<\/h2>\n

On Code Pen:\u00c2\u00a0http:\/\/codepen.io\/LFeh\/pen\/LFHBG<\/a>.\u00c2\u00a0This is not100% supported in versions IE 8 and below, so use your best judgement:<\/p>\n

the HTML:<\/strong><\/p>\n

\r\n<div class=\"center centerALL\">\r\n<div class=\"inner\">You can also position your element only in the vertical or horizontal. This work in IE6+<\/div>\r\n<\/div>\r\n<\/span><\/pre>\n
the CSS:<\/strong><\/p>\n
 <\/p>\n
\/\/ Translate mixin\r\n\/\/ ------------------------------\r\n.translate(@x; @y) {\r\n  -webkit-transform: translate(@x, @y);\r\n      -ms-transform: translate(@x, @y); \r\n       -o-transform: translate(@x, @y);\r\n          transform: translate(@x, @y);\r\n}\r\n\r\n\/\/ Center-align mixin\r\n\/\/ ------------------------------\r\n\r\n\/\/ Center full\r\n.center-full() {\r\n  position: absolute;\r\n  top: 50%; left: 50%;\r\n  .translate(-50%, -50%);\r\n}\r\n\r\n\/\/ Center top only\r\n.center-top() {\r\n  position: absolute;\r\n  top: 50%; \r\n  .translate(0, -50%);\r\n}\r\n\r\n\/\/ Block element\r\n\/\/ ------------------------------\r\n\r\n.box {\r\n  border: darken(#428bca, 10%) solid 1px;\r\n  .center-full();\r\n  color: #222;\r\n  font-size: 26px;\r\n  font-family: arial;\r\n  height: 50%;\r\n  padding: 20px;\r\n  width: 50%;\r\n\r\n  p {\r\n    .center-top();\r\n  }\r\n}<\/span><\/pre>\n
Basically, this behaves much like the table layout trick:<\/p>\n
position: absolute; #top: 50%;display: table-cell; vertical-align: middle;\"\r\n<\/span><\/pre>\n
Solution Two:<\/h2>\n
This one is supported in both IE6 and IE8: http:\/\/codepen.io\/anon\/pen\/fGpBu<\/a><\/p>\n
The HTML:<\/strong><\/p>\n
<div class=\"center centerALL\"><\/span>\r\n<div class=\"inner\">You can also position your element only in the vertical or horizontal. This work in IE6+<\/div><\/span>\r\n<\/div><\/span><\/pre>\n
The CSS<\/strong>:<\/p>\n
body{\r\n                font-family:verdana;\r\n            }\r\n            .center{\r\n                height:50%;\r\n                width:50%;\r\n                background-color: gainsboro;\r\n                position:absolute;\r\n                display:table;\r\n            }\r\n            .centerV {\r\n                top : 25%;\r\n            }\r\n            .centerO {\r\n                left:25%;\r\n            }\r\n            .centerALL{\r\n                top:25%;\r\n                left:25%;\r\n            }\r\n            .center .inner{\r\n                padding:50px;\r\n                display:table-cell;\r\n                vertical-align:middle;\r\n            }<\/span><\/pre>\n
Other solutions:<\/h2>\n