{"version":"1.0","provider_name":"Web Design &amp; Development Lowestoft Blog| Dessol","provider_url":"https:\/\/www.dessol.com\/blog","title":"Use just 3 lines of CSS to vertically align content - Web Design &amp; Development Lowestoft Blog| Dessol","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"fnaCOZ0hKp\"><a href=\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/\">Use just 3 lines of CSS to vertically align content<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/www.dessol.com\/blog\/3-lines-css-vertically-align-content\/embed\/#?secret=fnaCOZ0hKp\" width=\"600\" height=\"338\" title=\"&#8220;Use just 3 lines of CSS to vertically align content&#8221; &#8212; Web Design &amp; Development Lowestoft Blog| Dessol\" data-secret=\"fnaCOZ0hKp\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/* ]]> *\/\n<\/script>\n","thumbnail_url":"https:\/\/www.dessol.com\/blog\/wp-content\/uploads\/2014\/01\/css-code-snippet.jpg","thumbnail_width":780,"thumbnail_height":300,"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;"}