{"id":42,"date":"2014-01-31T10:35:40","date_gmt":"2014-01-31T10:35:40","guid":{"rendered":"http:\/\/www.dessol.com\/blog\/?p=42"},"modified":"2014-03-25T10:33:27","modified_gmt":"2014-03-25T10:33:27","slug":"3-lines-css-vertically-align-content","status":"publish","type":"post","link":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/","title":{"rendered":"Use just 3 lines of CSS to vertically align content"},"content":{"rendered":"<p class=\"lead\">Using CSS3s &#8216;transform&#8217; property we can simply and easily vertically align content. The transform property was designed to enable simple animations such as rotating and scaling elements, however we can manipulate content with <em>transform:translateY<\/em>.<\/p>\n<p>To do this all we need to write is<\/p>\n<pre><code class=\"css\">.element {\r\n  position: relative;\r\n  transform: translateY(-50%);\r\n  top: 50%;\r\n}\r\n<\/code><\/pre>\n<p>This is all we need to do! And it works well in IE9.<\/p>\n<p>Happy Coding!<\/p>\n<p>&nbsp;<\/p>\n<p><small>Source: Sebastian Ekstr\u00f6m<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using CSS3s &#8216;transform&#8217; property we can simply and easily vertically align content. The transform property was designed to enable simple animations such as rotating and scaling elements, however we can manipulate content with transform:translateY. To do this all we need to write is .element { position: relative; transform: translateY(-50%); top: 50%; } This is all&#8230;<\/p>\n<p><a href=\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/\" class=\"more-link\" title=\"Read Use just 3 lines of CSS to vertically align content\"><span class=\"label label-primary\">Read more &raquo;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":49,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,11],"tags":[],"class_list":["post-42","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippets","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Use just 3 lines of CSS to vertically align content - Web Design &amp; Development Lowestoft Blog| Dessol<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use just 3 lines of CSS to vertically align content - Web Design &amp; Development Lowestoft Blog| Dessol\" \/>\n<meta property=\"og:description\" content=\"Using CSS3s &#8216;transform&#8217; property we can simply and easily vertically align content. The transform property was designed to enable simple animations such as rotating and scaling elements, however we can manipulate content with transform:translateY. To do this all we need to write is .element { position: relative; transform: translateY(-50%); top: 50%; } This is all...Read more &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Design &amp; Development Lowestoft Blog| Dessol\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-31T10:35:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-03-25T10:33:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"780\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"dessol\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"dessol\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/\",\"url\":\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/\",\"name\":\"Use just 3 lines of CSS to vertically align content - Web Design &amp; Development Lowestoft Blog| Dessol\",\"isPartOf\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\",\"datePublished\":\"2014-01-31T10:35:40+00:00\",\"dateModified\":\"2014-03-25T10:33:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/#primaryimage\",\"url\":\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\",\"contentUrl\":\"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg\",\"width\":780,\"height\":300,\"caption\":\"CSS Code Snippet\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dessol.com\/blog\/#website\",\"url\":\"https:\/\/www.dessol.com\/blog\/\",\"name\":\"Web Design &amp; Development Lowestoft Blog| Dessol\",\"description\":\"Work, news and murmerings\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dessol.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362\",\"name\":\"dessol\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g\",\"caption\":\"dessol\"},\"url\":\"https:\/\/www.dessol.com\/blog\/author\/dessol\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use just 3 lines of CSS to vertically align content - Web Design &amp; Development Lowestoft Blog| Dessol","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/","og_locale":"en_GB","og_type":"article","og_title":"Use just 3 lines of CSS to vertically align content - Web Design &amp; Development Lowestoft Blog| Dessol","og_description":"Using CSS3s &#8216;transform&#8217; property we can simply and easily vertically align content. The transform property was designed to enable simple animations such as rotating and scaling elements, however we can manipulate content with transform:translateY. To do this all we need to write is .element { position: relative; transform: translateY(-50%); top: 50%; } This is all...Read more &raquo;","og_url":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/","og_site_name":"Web Design &amp; Development Lowestoft Blog| Dessol","article_published_time":"2014-01-31T10:35:40+00:00","article_modified_time":"2014-03-25T10:33:27+00:00","og_image":[{"width":780,"height":300,"url":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","type":"image\/jpeg"}],"author":"dessol","twitter_misc":{"Written by":"dessol"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/","url":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/","name":"Use just 3 lines of CSS to vertically align content - Web Design &amp; Development Lowestoft Blog| Dessol","isPartOf":{"@id":"https:\/\/www.dessol.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/#primaryimage"},"image":{"@id":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","datePublished":"2014-01-31T10:35:40+00:00","dateModified":"2014-03-25T10:33:27+00:00","author":{"@id":"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/#primaryimage","url":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","contentUrl":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","width":780,"height":300,"caption":"CSS Code Snippet"},{"@type":"WebSite","@id":"https:\/\/www.dessol.com\/blog\/#website","url":"https:\/\/www.dessol.com\/blog\/","name":"Web Design &amp; Development Lowestoft Blog| Dessol","description":"Work, news and murmerings","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dessol.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/bb13ecb8e4b05dee2d7ec34d4a2af362","name":"dessol","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.dessol.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/36a894164074bc1f6a20492e1d14ddc1?s=96&d=mm&r=g","caption":"dessol"},"url":"https:\/\/www.dessol.com\/blog\/author\/dessol\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":12,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions\/137"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/media\/49"}],"wp:attachment":[{"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dessol.com\/blog\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}