{"id":505,"date":"2014-04-07T00:33:42","date_gmt":"2014-04-06T22:33:42","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=505"},"modified":"2014-04-07T00:37:08","modified_gmt":"2014-04-06T22:37:08","slug":"css-tricks","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/css-tricks\/","title":{"rendered":"CSS tricks"},"content":{"rendered":"<h3>Vertical align anything with just 3 lines of CSS<\/h3>\n<p>source <a href=\"http:\/\/zerosixthree.se\/vertical-align-anything-with-just-3-lines-of-css\/\">http:\/\/zerosixthree.se\/vertical-align-anything-with-just-3-lines-of-css\/<\/a><\/p>\n<pre lang=\"css\">\r\n.element {\r\n  position: relative;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n<\/pre>\n<p>It is a similar technique to the absolute-position method, but with the upside that we don\u2019t have to set any height on the element or position-property on the parent. It works straight out of the box, even in IE9. <\/p>\n<p>To make it even more simple, we can write it as a mixin with its vendor prefixes:<\/p>\n<pre lang=\"css\">\r\n@mixin vertical-align {\r\n  position: relative;\r\n  top: 50%;\r\n  -webkit-transform: translateY(-50%);\r\n  -ms-transform: translateY(-50%);\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.element p {\r\n  @include vertical-align;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Vertical align anything with just 3 lines of CSS source http:\/\/zerosixthree.se\/vertical-align-anything-with-just-3-lines-of-css\/ .element { position: relative; top: 50%; transform: translateY(-50%); } It is a similar technique to the absolute-position method, but with the upside that we don\u2019t have to set any height on the element or position-property on the parent. It works straight out of the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[20],"tags":[37],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/505"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=505"}],"version-history":[{"count":4,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/505\/revisions"}],"predecessor-version":[{"id":509,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/505\/revisions\/509"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}