Skip to content

Instantly share code, notes, and snippets.

@matthewcrist
Created September 11, 2012 19:18
Show Gist options
  • Star 46 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save matthewcrist/3701206 to your computer and use it in GitHub Desktop.
Save matthewcrist/3701206 to your computer and use it in GitHub Desktop.
Responsive vertical/horizontal image centering with CSS only
<img width="500" height="335" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFPCAIAAAA0uatrAAA4ZElEQVR42u2d919TW9aH5++aO6YSEnrvqAgCAiIiWLCigiJ2EVBAAbGLV7BgRzqKihQBUXpNIYE0Zub96V05x8twlRIgQHLyzef53GGQkpwcnr322muv/Y/JySkAAAAc4x+4BAAAALkDAACA3AEAAEDuAAAAIHcAAACQOwAAQO4AAAAgdwAAAJA7AAAAyB0AAADkDgAAkDuuAgAAQO4AAAAgdwAAAJA7AAAAyB0AAADkDgAAkDsAAADIHQAAAOQOAAAAcgcAAAC5AwAA5I6rAAAAkDsAAADIHQAAAOQOAAAAcgcAAAC5AwAA5A4AAAByBwAAALkDAACA3AEAAEDuAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AAAAyB0AACB3AAAAkDsAAADIHQAAAOQOAAAAcgcAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAEDuAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AABA7gAAACB3AAAAkDsAAADIHQAAAOQOAAAAcgcAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AABA7gAAACB3AAAAkDsAAADIHQAAAOQOAACQOwAAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAgNwBAABA7gAAACB3AAAAkDsAAADIHQAAAOQOAACQOwAAAMgdAAAA5A4AAAByBwAAALkDAADkDgAAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAgNwBAABA7gAAACB3AAAAkDsAAADIHQCwUqamtOaDywW5AwBsgIkJ9fi4fFwuVypVC6NSTajVGu2U1mAw6vVGiB5yBwAsJ5rWanU6nUFvMBpYjNP0X51Oz1jVMmKlX9Hd/e1qTs7OHTv8/fy8vb39/PwD5noEBgZu3LgxNibmaOqRe3fufGxqUiqUjOUNsDzkDgBYROjkbtbgFCf39va2tbbW1tQ8r6gof/To7p071VVV37q6FHIFSZk1vkVcr55Q9/f1PS4vT9yZIHWUbNiwQSAQiP7+EDIP+jyfz6f/cXF2jo6MvJKb8/njJ7VaTc8EiofcAQBzRNDkR41aQ+5++vjx6cxTO7ZvDwwIcHZ2dpRIxGIx6ZXEKpFIPD09Y6KjUw8fvnmj+O2bN93fvikUP12v1/90/VI9y84S6CdMaibfNzYePZLq6uxMEqff6zDPg/6Jng+Px6NnuDsp6UVFhUqpguIhdwDAT6vq9QadzkCB85+lpfv27Pbz9SWR85kHCV3812NGqazl2fDZ0VHi7+dHrs84ceJGcXFtdXVXV5dSoaQfa/xbDmcJz4cV9IfGxsMHD8ikUvpdDgs+6CnRk5E4OOxM2FFV+Y6dfOCdhdwBsF9I6xQvt7W2Xr50KSQ4mHW6SegO5j5+cb2TTObr4xsXG5N+/PitmyVVlZXd3d0U1y/VtsyQY4riK9++3R4ba8rIiETmKJ6ewIn0NPqlBuM0QnjIHQB7TMKQ2dvb2k6dPOnl6UlyJn86rPjxN9cLWdf7kJ3rampMKZelzyrou8ZGx24UFfl4ezNZGgdzFE8D1YuK5zqtjl4m3mvIHQB7ycOQMYcGh67k5JAxeUyo7rA6D9b1PB4vwN+/5csXGk6WvRhA374nOZmJ4Bd/tjS6SKXSq7m5E6oJpGggdwC4D5lOO6V7/fLV1ogIwWpq/ZcHRdPb4+LGx8aXHUrTwKBSqgqvX3NzcVk0C08PkVhMU4fUw4eGh4aXN6gAyB0A28AUsA8NncnMlDo6muNHyz7oN+ZfvbqSOHqKCeHramrCt2yh0cKceQNNGnYmJPT09OgN8DvkDgBHUzFNHz5ERUYuXF+4eg+aJXh5era2tK4wjqYX0tvTs3f3bqFAYM4LIb/Hxcb1/PiB+B1yB4Bra6fEn6UPPT08+GsesP+SnDmZnq5dcRELaVqpVF48f96Byekv7nc++T22r7cP+XfIHQDuJNknJtTZWVkSBweL1MOsMHh3d3P79PHjyoNoLVM+X3LjhkwqNed1UfyenLRrfGwcfofcAeBCGfvoyGjqkSMC8zIYaxO8nz6VYZEKRSbXZHjy+DENGAKB0JxfnXHihEajQX0k5A6ALZvdYOzv60/atYuCVisxOxu8+/r6dHZ0WCqCNhqn37554+vjbc5GVpFQeC0/T7/ETbMAcgfAigpjujo742Ji+Dy+g5U9BAL+9WvXlrGnaQG/NzY2BPj7L+p3GlqkUumL58/pW3CTQO4A2J7ZKTTeGh5uTr3geshdsC0qaiU173P7vaHB399vUb8LhcLAgICujk4Uz0DuANhYnr2/ry92W4x1mp1Nj8ik0vq6Wsvq1eT3+nofH2+hULDo4uqe3btVStXUFJLvkDsANlIbMzg4uDMhwWrN/ldtIv/8ubMWj53Z/LuHu/ui9TM0ABRaNDUEuQMAVtHs8nH5vr17KDJ1sO6HQCjcEhY2Ojpm8cIV8nvFs2dOMtnC9e/0rzQGNDU1ITkDuQNg1UxNaTUaTcbJE3yrNzubmZE6OtbX1q1G7Ey+vn/vrkQiES1YI0STm4Qd8eyRUrh/IHcArDdsz8/LEwmF1lP1uGjVefblrNWoWmEO69BdK8gXiRa5GkKhsLioCMkZyB0AK4UU+ezJU0dHxzXr8miRmpn47XHsmU0WvyBMMD6ZmZGxcPEMXS4fb6/WlhYkZyB3AKyx8PFj00dvb+917y6wjD5iHe1fV6kfAPldIVfs3b174TwVTSAO7t+vVmuwrQlyB8DKymMGBqOjIq28PGaOtDuTeS8ve7R6WRGd3tDX27stOnqBi2PK24jFj8vLjUjOQO4AWNMi6uTxY8dszuwzUfPZ06dXtZMXjRxtrS2BAQEL5Gfon8I2bervQ89IyB0Aq0nI3LtzVywS2coi6q9yFwgS4uNXezMRW/zu4uKywIIEDTNZly4h8w65A2AtqXZzNuxYc9rd18fnW1fXaofM7ChoSsHMMwrSM3FzdWlsaETlDOQOwHqi1erGxsbj4+JsNCEzuw9BTXX1ait1akpLl+zc2bOC+S8Xj8/bk5w0MaHGyirkDsC6pdr1On12VpZgXY9VslRB5M0bxWvQo1HLbN/dk5w833D4c2W1rAwNIyF3ANYtIVNbXe3i7GxDVe0Lnt2RqV+TlUy93vC9uzts86b5BkX6/JawzYMDg1qsrELuAKxDQmZ0LCY6mi/gO9j+Q/C/NdW1SIYwnSMb3N3c5luoEPD5V3NzsLIKuQOw1pB38q5etd1F1N8bAGzetHFkeGTNGrzQvOfB/fsODuI5O8+wW6uwZxVyB2Ctzd786bOXpwcHEjJ/26f69eua1ZjTFIEGkvPnzs2XfKfPHzl0iPlK3HKQOwBrYiW1WrNv716brpCZpz1k7VpGyiR3uVyxb8+eOa8kPSWJg8PrV6+Mxn/jroPcAViLfELFs2cStq6DQw96Oc+ePFnjAnMaS3p+/NiyefOci6v0yYjw8KHBIXQDhtwBWPVgc2hoKHxLGAfKH383aXFh0doXINJw0vThg5en55wLGBTU52RfRuYdcgdg1U2Un5fHpYTMLI3yLl64sC7V5XRVyx89kkqlv69h0Gfc3dw+fmjCnlXIHYBVzCF0dXb6eHtzZh31b1tDebyT6ekGwzrEyOx2sIJ5DjmhoTRpV6JKqURyBnIHYBWY0uq0usyMDJs4P295+5gOpKRMmlyrXRe/E2dOn/69MwHpXigUlty4gW7AkDsAqxC2M6lhN1dXTobtbM59186dE6qJ9Wrqwh4snrJ37+/Dp1Ak8vbyavnyBcl3yB0AC8eV9N8jhw9xNWw3yV0ojI6KHB8fX8fsB/m9v39g+1yN2OgzuxITlavclxhyB8DuwvYP7987c6KNzEJyj1xnubOX+tu3b1vCwvi/1SMJhYLioiK9HskZyB0Ay1VAHjuayskimdkdCEJDQoaHhtd93dJgMLY0NwcG+P9Sb8p0e3drrK9H5QzkDoBlimSamppcnJ05tmvpd7kHBQYOrvKOIbbrgOlXLJjZJ32/b2wI8PP7xe/0f6MiI/v7+3EUH+QOgAWqOFIPH+F22L42cidlKxXKvt6+0dFRjWZyYb8bjdO1NbWeHh6/+J3eiGNHj2o0GpzmAbkDsJKw3XSKnquLi4jTYfssuQ+uhtwp0NZOaavfVSUlJgYFBkSEhxdeu7aonWkwqK6q9vX1/TU/IxReLyhA5QzkDsBKsu3aE2lpnA/bWbmHbdq0Gl1/DYbp7m/daceOyaRSupL0izZs4G0MDTUnv0/x+/vGxgB//9lvgUgkoh9V8ewZTmuC3AFYVrypN7S3tXl5enK4SGZVq2XoR1F8/byiIjgwkOw8s2jBntpaV1NjTvRN8fuX5ubwLWGz/U4jhLeXZ0N9A/wOuQOwnKXUnMuXBXYQtrNyj922TT4ut5TcmZ8zWVxUJHV0/L3PGpm6ID/PzLoX+rLv378n7kyYPULQzwwKDGxubobfIXcAlpYm7uvtDQ0O5sxxS4u2H9idnKSeUFtkoZJ+iEYzmXXxAl29Oec99Ov27E6e1Jjb7YAG2rHR0bTjx+mnzbwj9EPCNm9ua21DcSTkDoC5UDx4784dOzE72zjsWGqqTmeJsH1KSz/nam6uUCCYr36UHO3v59fft4SiRq3W9JV3b9/y9PCYSdHQB5s2bmxpbrZzv0PuAJibUlAqlPFxcdzr276A3E9nZlpEkfRDHv35UCJxWGCtgj37qbG+Xr+U30hhvsFg+PTx4/a4WIGAz/58eo+Cg4LoR5nyM/ZaHwm5A2CunmprapxkMjHXKyBn7Q/i5+ddXXn+mmT92XTArOeikx6K62/euDE9/e9lvDtjo2P0bL08PdgsPPndx9v75fPner1hyi47A0PuAJgVHuq0+lMnT/LtYyl1Jk9S9uhPg2F6hZdOoVAmJiSYc+lornDx/PnlHZHK1uF8aW4+dGA/W2FJfndycirIy1OrNXZYAg+5A2DWUuqP798D/f3toQJyJkniKJHU1lTrV5aWoZi6qLBQaF4ui4R8+ODBlXSQJ4lrNJrKt293JyfTNGvDhg1k+UMHD3R3dRmNRrvawgq5A2DGUqrBeP/ePZFIaFdhu5enZ8fXjpX0bCHVtrW2enl6mDkoUqydlLhTpVKtxMJMFt6oVqtrqqvTjh3z9fH5448//P38/nz4UD2hpn+yE8VD7gAsLguSQtKuXRRX2o/cBULhlrDNoyOjyy5yZxw6eejgQfNb3pPcd2zfrlQqV+5fVvH05Ls6O2/fvElvn5+v7+6kpOqqKqVCCbkDAKaYTO4Xd3c3+8nJsAWFB/bvN7/qfM7K0YpnTyVMhsfsXyo4dOCAZQ/2o5kHPRMK5Lu7u8sePcq7cqWmusoeSmggdwAWyxrrjdfy8+2nAnJG7uTBZZfKUMg8MjwSFbl1SdeNx+NlXbq0GvtLTUviOr3BMK3ValUqFSJ3AJCT0SqVyrjYGLuSO0Xajo6Ob1+/XnaRO33j9YIC4VIummkJ19GxrrZ2tTcfIecOADDlZD59bDIdp2c35e3samqAv9+P79+Xt5pK39Xc3GxOYftss2/YsOHY0dRJzRTaskPuAKzF3qXCa9fsaimVzcns3bNbrV7m8Rck93eVlSFBQTTdWdjv5HQaSEzbjkSiY6mpY6NjWi1Ou4bcAVj9nIxKpUrYscPeEu4CZqfoStIj5OiB/v4bRUWbNoYKhSbFsx6nD+iHszuM6CNHicTXx2fvnj0vKp6r1WrrMTt73hbkDgBHczI6fXtbm4e7u9jOcjLu7u4tX76s8FRSrWkB08gqPjQ0xMXZOcDfb2t4+I7t8ftTUi6cO3erpOTd27ffuro0ao21lZ/L5QqlQmk0GE31lDq9LYoecgdg/pyMcbr0wQOKNe0tJ7MrMXHCQp1+tVqT4nt7ez9/+tTd1TUyPMz+ZKZ2xaROnZWp0/RkNJOnTp6Ii4nJzcmuqqykJ0+foZtBrzcVztuK6CF3ABYQkzb18GG76ifjwBxpREOaZesR2cYvpnNTrV6ObH3U9rjYP/71L3rrpY6OgQEB+/buKbp+vaGubnBwcIoZ9enlWPnyAOQOwPxZ44EBJmUstCuzBwcG9vf12e3CJr3wsdGxqMhI9n2fWfJl25CFhoQcPXLkVklJ04cmmoVomX2w1il6yB2AeRLuBmNjQ4Ozk8yuEu48Hi87K8uej7kgTQ8PDYdt3vz7oE53An2SPdHbxcUlInzL8WNHSx/c/9LcTOMBm2ii/1jJ1ARyB2DeIkgK0IT2VCcjFIl8vL07OzpWuJRq0zCHKfYFBizSAXRG9Kb1Zze3mOjoUydPPi4v+9reJrfokeKQOwCWz70ePnjQrhLu9GIvnDun1+vt+X0nuff29C6pvTN9JVvfScr38vCIi435/Onjug+QkDsAc5t9ZHg4IjzcfircKQ4N8Pf/1tVlz2H78uT+SzhPs72Xz1+se2oLcgdgroQ7c6aPm6ur/XSCJCndLCmx80Olf6Zl+vqCAgOX99aT32VSaW11DeQOgJUm3CuePnOwm7VUPp+fvGuXQqHE7n/TgurwcHhY2PKqpH7KvQZyB8Ba5X4lJ9tOEu5kMT9f37aWVjs8aHTOjNz42HhMdLRgWXIXicU04fv88eO6X0zIHYB5ti8dOWz+EUI23N2XOSv1SfljJGRm5K6eUO9OTlre0C6ymoojyB2AOf685XL5tqgoAde3L5kWAAWCq7m5equpzraSFZfTp04tT+40DQoNDh7o71/3BBfkDsBce1P7BwIC/Lm9N5XMLuDzM06c0Cy3tS9XMRqni4uKllcoRd8Vu22bUqFc90sKuQMwR+DW2tLi5sblQ1NNZhcI0tOOKxQKLKL+vjm58s1bqaPjMhbUKd4/lnpEawWDJeQOwByrqXW1tY7L+tu2laa+ZPeL589TgKm176r2+aohv3V98/H2XsboLhQKigoLrWEBA3IH4He5T796+VLEnC/ByapHd1fX27duTpmWjRGzz73oMqGa2LVz51LT7nTDODvJ6mpr9HrIHQCrTLk+ffKEe6UyIpGYbLU1IoI9hBp59oVnb3lXry5V7kKhMDwsbGR4ZAq9ZQCwTrmXPrjPMblTUOnu7n4lJ2dwcBBVj+asuzS9/+Di7Lyk2ZupOc95a2nOA7kDMEfUdi0/j2M7mEQikZ+v7+ePH//97//gLTYnM8McnxvPN7tmhoYBV1eXT1awfQlyB2Beud+7e5fHubSMUCgMDAho+vAekbt5EzjjQ9Mhi+aWw9INc/jQQes5WRtyB2COtMyL5y842Q+SXlRQYEBz82f43ZztDiMjI+FhYebcCTQxcnN1/djUZD0tHCB3AObIt37+9MnF2ZmTde6kqo2hoe1tbXr43Yxh/sH9+0KBQGxGtv1yVpbOmprzQO4AzJFvHR8f3xoRwdVm7mSiqMjI3p5edApbNHgfH5fHxcYuvADD4/F2xMePjo5ZVWkp5A7A3MH79YICDneFpJe2OzlJIVdw9WgO8qzBYGShAJz9gF7sUhPi9F1V7945yWTzTeOYTFdgW6vV9dSE3AGYe49iz4+ekOAgDreX4Qv4J9PTNBrNFOe2MrHnoD4sLS3IyysuLCx9cP/pk8dv37xpbWmZnJxcanyt0+kuXbw450hPZvf18Wmor7fCNQzIHYB5Q7bSBw/EIhFXmxDQ66JotOj6dQO3kjNanX6gfyAmKprH45GRyb9CISEUMydZnzxxYmxsafkT+uLR0bEd8fG/+J3+b0hwcGNDg9EqVy8gdwDmzbxTVJu53NavtlL87iSTvXrx0sihxVUalUuKi+esZKXXu2HDhgvnzi01OaPXG9rb2oODgthlGOZEbH5iQkLH168G47R1XgfIHYCFQjaFQnHowAEBn8/V+J1i2qDAQNO52JyI3+ktGxoc3LRx43y9+MnOEeHhiqW35DUYphvq6ry9vP71r3/RDOBKbs742Lg1r0hD7gAskr2Vj8tpLk/zeq52AKapyd7dyUpOHKBKYXt1VfUC7xRF7gdSUtiZ2TK2Nb15/erg/pQP79+T1q38ckHuACwaDOo1ak3R9esuLs5cLY4UCAXXCgo4sLOJXsLjsvL5Mmk0QgcHBZGal10jZBK6ZtImSkghdwDMyr8bDIaamuroyEjyO/dCeJFpsdH1Q6PNdyag519fVydhe9b/YnZmgaGqstK4siy5rXTThNwBWII4hoeGL1+6RCE891ZZ6RUlxO+Qy+U2nZwxbUAbG9+TnCQUmB4zKyVsCr6kuHgldf221SQZcgdgabNympI31NXHx8VxLIQ3HZYtFN4oKrb14J3eo8GBwQf37iUlJlKoToOWyJSNCbxVcmNqarmCZg42USgUk6YH5A4Ad0N4pUJZXFjk7ubGpRCe5O7r49Px9auttyVgt6cqlaq62tq7t+88e/Lkx/fvy9ie+jNgZ37ao4cPS4qLbGhD7z+s+e2ZxEkxwLr10fThQ8y2bXwOFUryeLwTaWncOH6PrKxneg8Qy5ayTm9QTUzk5+W5ODm9evHChqY1/7Dad6Wt5cv4uBwngQHrz8IfPXJEyJUDV0UisbOzc2N9A3oCs7XtvT09hw4coDEvKDCwv6/fhoY965X7+8aGgf7+qSkc4AusvRB+QjVx+tQpzlRJ0kRk/759k5pJew6tmPoo4/vG9+FhYXRBSO5px47ZVjrBqnPuarUG7gC2sdFJrkhMSBDwBdxYWXVyktXX1dlt8G7K4Wgm79y65eHuzpbcOEokb169sq0LggVVACwxfzdO19XWLvU8ZWsO3n8GqnaZauvv76eXb2qrxlRDkd+jIiPHx8Zt64JA7gBYZhY/oZpIiI/nRnKGpObl6dnW2sbVbu8L1LnW1tRGhIfPXiQXCoW3b920uXkM5A6AJWDqoDNOnuBMZSS9kIK8PKNh2k7eQdK6QqG4VlDg6uoye4Smjzdv2jg4OGhz8xjIHQBLTecNV6/kcmZZlV7Itqgo+biC88uq7NppW2vr7iTTvtZfNqYJhYL79+8bjba3/AC5A2CxVbjzZ89yRu5isVgmldbX1XH7nFXTq9NM/lla6ufr8/t+BfrMrsSdKpXKFpcfIHcALBP9TU1OHT1yhEsbVvl8Xm5OjtE4zdW3zGgwfu/+fvjQIbFY9Pt5ivQZL0/P5s+f9XqbrBqC3AGwjCnUanXizgQu9QSm1xIXE7OMcy1sImDXaDSPy8qCg4Lm3GBs+ozY4eGDB7ZbDwq5A2CZQouhoaGwzZu4dKA2c+ioe3tbm05n4NI7Rb7+2t5+6MABtlfanCkpGtiyL2fRF9vuwAa5A2CZSPBLc7OHu7uIW6fxiYTCRw8fciMzwy6cKhXKkuJi37ky7DNm5/N5aWnHVaoJm670h9wBsMzOl2dPnkhIDZxr8n7u7Bkaumw9M8OeildfW5sQHy9kHvMV+NM/nT51SmE6dNC2a/whdwAs447c7GzuHcJHryh+e5xKpbJdubN5mM6OjoyTJ5ycnBZY8aYX6+zkVFxYqFFrOLA7F3IHwALzfdLBnuQk7smdwtiQ4OCBgUFblB2j9emBgYGCvDw/X78FOjNTwM7n8cK3hFVVVhpsf5oCuQNgMYkM9A+EBodwaTV1JgHt5ur6+dMn26p21+n0FK0PDQ7duX0rbPMmGnQXyMOQ9D3d3S9euNDf18+lXmmQOwAWSLg31Nc7SaVisZh7cpdIJKZ41kLWm2L6NNBQQdDPXBj2y8jUZlatmE7nYL7lx48fN4qKI7aEMSn0eeth6OHt6Zlx4sSX5mbTb+FWIx3IHQALyP32rVtCzuVkZgoiH5eVGZa7/950SB0TRxP0sXxc3t/X1/LlS11t7dvXryuePr135/ZsKNYuvX//5fPn9K+11TXNnz9/7+4eHh5WyBXspZ7x/kymaObnq5SqpvcfKAYPDgoS/hatmwofRSLW6U4yWVTk1qtXcttaW7XMkMC92xJyB2DFaZkp7dHUIzwej5NyJ0WW3Lix9Mhdy8bmGrXmW1fX2zevr+XnHUtNjdm2bVNoqIe7u0wmc5RIyLiiXx5CIX1K4uBA/yqTSt3d3AID/MO3bNkeF3f44MHsrEu3b5ZUvXtHUh7o71erNRMT6q/t7VXvqsjU22Nj6Vv++OOPf23YwJ/1YNMyzk5OgQEBu5OSruTm1tfWjo6OmqYFpHWONs+B3AFYaZ5hdGQkPCyMewn3mRqS3Oxs82PbqSkdOxKQf2+WlCTv2uXn60umFgj+51lyuPivxxxzBSbKZh8m2zO5FQH7/Xw+fUw/zdnZmcJzGi06vra/efnyTGYmWTueRoDY2Pi4OPqAPtwRH79v754T6WkFeXkPS0tJ6L09vTQYmAJ/g5Hz3eohdwBWtnanN7R8aXFxcf6lmyCX5J5z+bI5cmd3Ccnl8opnz8iq7DFGpGNW5RZZACCz0w+UyaQk8ZLi4va2do1Go9PpTRl5zaRarZ5QTfyPiQmNZlLLPCujcZrJ5Ojt5+xAyB2AFUHWKC8rF3E0bGf3MWVmZCx6agepk2Ra8fRpbMw2CrhZp1tqUZd1On28KTT03Jkz9XV1KtUEKXvWs9KaerfNg33emZA7ACtbTdUbLmdlcTXhzso948SJBeTOBuytLS17kpMdmCoUC8bpdGHFIlFQYODJ9PRXL14MDQ6a6mGYtVnce5A7AKuHSTFJuxL5HC2VYdMyNHrNl5Zhqw+fPnni6+O9wC6h5cTpYnFwUFB62vHnFRW9PT1sdsU+j3WF3AGw/GLpol8gHx/fsnmzkLtpmYUXVPU6/e1bJTKp40quALtwyi63ymTSiPDw05mnKt++HRwc1DHNA7T2dJQr5A7A6svdlEpeKAOg0xm+trd7eXpydTWVlfv1goI5SyHJ+E8ePyY5L8PsMxG6gM+XSCT+fn7JSbsK8q421NePjY3RTzYapxGnQ+4AWD5ml8vlWRcvvqioUMgV8yUE2L2pFGxyb2/q7Dr3+c6s0OtMcg8OCmKrYugrf69unF3UKGBsblprFQqdnZ1CgoJ2JyfnZl9+9fJF97fuCWaNlNnrBKdD7gCsUoGjTt/Z0eHh7k5yit8eV3r/fl9fH7u1fXYgbzBOV7179/PgHk5uT2X+S/KdbxOTXqfv7em5fevm3t27gwMDXZydHSUS1uXs9iSJg4NMKnVxdvHz9YnaGrFvz56L58/fv3fvfWNjb0+vWq1m9zr9LGfEvQe5A7C6NTAG46OHD9kCbQpL6YONoSEXzp9rbKhXKJQ/i/CmtIzcqyQclrtYLJVK62prFjhHVKs17f5XqzVk+c8fP71++fLBvXt3b9++d+fO3du3npSXV1dVfWlupth8ZGREo5lkbW6qOofQIXcA1jwtM3Vgf8rs3t9sgtjZ2Tl++/aSG8Vf29unJqf++9//q6ut47DcaVTz9PBobWlZtM6d7SEzZzuwpfb/ApA7AKsCmYjc7eHu9vsyKRvIk+i9vbwO7t//9MmT2ppqH28vri6o0isNDQkZGhzC2ibkDgAHNp0asy5eXHhfElu6JxaLggIDXFxcuBq500gWsy1aqVQi4obcAbDxpVS94Vtnl5+vrznBOFsEwuFSGRrAUg8fNqfkH0DuAFh1BeSEaiL1yBE+d9sJLFXu+Xl5RuM07g3IHQAbRqvVDQ+P7E9JETOnOkDuNDd5Ul4OuUPuAHAheFer1S9fvNgWHS1i2ohzOOuyaKmMu5tbW2ubDrv/IXcAuOF3ilXHx+UPS0ujtm4VMVG8HSpeKBRuDA0ZHh5GqQzkDgCnUjSk+NHR0T9LH0ZFRv5VHiO2q4T7gZQUrKZC7gBwU/EGg5EUX15WtnPHDqmjowWPobD2Okg+/0puLhLukDsAHFe8SjVR9e5d6uHDHu7ubJ8szi+nvn75culHYwPIHQBby8Wz7SFbvrRkZ13avHGjZc+Ts7bVVG8vr67OLqymQu4A2AtsB5X+vv7ysrIDKSlenp5sczHO7U3dppArppa7msoe0sQcS431WMgdAFvL1UxqJttb20qKizeGhHDJ7zQjOXfmzHwHMJlj9rGxsYa6+qyLF6urqpb9cwDkDsC65Wp0esN//vPf7MtZglldJG0+3S4SPS4rMyx3NVWn0+ddueIokfzxxx+7du5UqzUouYHcAbA9KIQvKizkzKZWkVjs6eFh2r603IjbaJguLixki0eljo7v3lZiYRZyB8Am5V7x9ClnGrsLhMKY6Ojx8fFlp8vpgrx985q0TheErZfXaCYRvEPuANjeEmtjQ4OLszM35E46PpOZuZI6GbogHz98cHN1ZQ9QdZLJaqqrEbxD7gDYGOTBttZWb08unNphGp+YfmErcbHpENrOLl8fb/aC/NzsiuAdcgdgVSCzMFhcMVqtbnBgcPPGjRzY2cRWuHd2dKwkcqcLMtA/EBIcxF4QNnivr61F8A65A2BZtEzB9V+PKa1GM2nZmpmJiYmE+HgOrKnSS0jYsUOlVK1kCCS5j46Mbo0IFwiEM6mePcm7UTYDuQNgSfOS2Z9XVBw6ePDI4cNHDh06kJJS/a7Kgnsvp0yzganUw4f5tl8NSS8hNyd7hS1lSO7jY+PboqJmRjsK3h0lkhfPn6NZDeQOgGWy4Rq1pqiw0Ekm4/F4ZK5//vOfyUm7LN7J1mAw5F+9auuRO6vg2pqaFeZPaLSTy+XxcbGzLwh9HBUZSRE99qxC7gCstEKRJJ5+PE0kFM6s7MXGxAwODlp8zyQFpOWPysQ2vqAqFAo3bQwdGhpaoX9J7kqFMmHHr3kq+r8FeXnIvEPuACxfLmSQ5s+f42JiZvqwk1lCQ0K+tn9dDbnQaPHh/XtXFxebrobk83mnMk6ufORjD7Tan7LvlzyVkFmtbW9rQ0MCyB2A5SR86fGkvNzP12dGLhST+np7NzY2rFLYSL+0v6/PVB9is8E7jUoSB/HrVxZo80typwtyMj3990UI+syhgwdI/VhZhdwBWFoELR+XZ126JJE4zBQm0gdurq6Vb94YjMbVmyuQsHYnJ9lu2l0gFG7etHFwcNAiOXGjcfpqbu7vcqeZjUgkunPrFpIzkDsA5uqVhPK1vT0pMXH2qaekEmcnpyePH6+2TQx6Q97VK7bbPoxEfOHcOUslTOi9IIOLRHMU/tPkxsvTs+nDe/gdcgdg0ayInuLNiidPA/39Z0eLZHZHR8e7t++sgUfoV9RUVznJpLaYdqfnTENgY32D3kIXigaJ+to6J5lszqtB71FU5NaBgQEk3yF3ABasihkaPn3qlEQimb1H1GR2ieTunTs6nX4NMrw0uoyMjIRv2SKwwX2qNNfZtXOnUqm01IXS6vQ9P3oC/Pzm27VLfk/Zu1c+LkdlJOQOwBw+JbO/b2iMjooS/FUVM2N2+r+F166vjdlnqt2zL2fZ3FYmNg/+Z2mpZec3U5NTKfv2zXc16JfSiHIqI2NSMwm/Q+4AzJ74G1UqVVFhobubG//vy5imqnax+HrBNbLGWlZl6PWGli9fPNzdbauDGEk2bNMmSy2lzk67lz54sMAKM/md4vqL589rNJM4rBVyB4BZOzUY29vadicnCf/aoPSL2YuuX19js89MJk6dPGlbwTv591pBgcWXJbRa/UBff1Bg4AL91EyTBqHw7OnTSoUS+XfIHdh7saNGo7l/756vry+fx/u9EkMqlRYXFpr6g61HJTU9vc6ODn8/X1vpEEljYYC/f3d392rEzjRgXMnN5f32Nv2anzEVvx8cGhxE/QzkDuy32PFb17cjhw6xM/rfd8/LpNIH9+6RYddxj4zBYKDnwCb9bSBs5/Ozs7JWKWrW6vR9fX0bQ0MXLv9nD2yKi9n2+eMneouxvwlyB3YEE1dOlpc9Cg4M5P997XTG7K4uLg9LS9fX7OwgRE/1wrlzs8vtrTZs9/Tw+Nrerlu1lAgF44/Lyx3MOIOQ3lYfb+8H9++r1RqkaCB3YC/Fjv19/SfT0yUODnOmO0ijHu7uL55XmOb1VhD3abU69YT6/NmzIqFwJfmZ1R4bTCfqnTq1qouZTD9k7amMkwsnZ2ayamKx6NCBA22tpv4zWGWF3AHHUzE0W98aETFnwM6a3c/Xp/rdO6ZXuLXM6E2VJ5rJO7du+fqYWtyYr3g24yRgHk4ymaOj4+r1gPTz9e3q7Fxth9LPHx0Z2Z2UZI7f2RQNhfBXc3P7+/potIbiIXfAwVQM8fL5c38/v/nqT+jzoSEhH95/sMK1OLY55de29rOnTwcFBopFIj7zYKJ5U5EPPdiPyeP0efovfezi7EyvaN/evQX5+VXv3kVFbl2lXVH063Kzs/X6tbhuFIaTqXds325mHRFdGXp6mzaGlhQXf+/uVqs1+HOA3AFHAnbS4tDgUPblLCcnpwV2OUZGRLS1thoM1nu+j45JL/T86HlSXn4mMzMpMTE8LCwkOJhGLAqcg4OCwjZvio+LO7A/5eKFCw8fPGiorx8cGCSd0UREp9UlJ+1ajcJKuqQ0hPT19a12XMx2iCTo5QwMDOzdvce0FOEgNvNJbtiwga7Px6YmxO+QO7D9gF1vmJiYKH/0yLSVf541SXbynrQrkaRpE4tvWq3elGHQ6sjaw8PDvT0937q6ujo7e3p6SOUqpYqdqdDXMMe96thUNT2OHztmcbmLGW/evnnLsPqH3o0Mj/T39Q/0DwwPDSkVysH+gZPp6VJHR3OWE2g+ExMdXf3u3cSEGn8XkDuwYdj4rrOjc39KCrs9fYGd62nHjo2NjdlcWcVMJMsmndiPWZXPtZI8fb0g3+JyN9UdxsYo5IrV3vdPg1lOVpaPt3dQYODG0NCt4eFxsbFxMTHOTk4Ly515i/lHU4+MjIzQgIfiSMgd2HZJjFKpKr1/PzgoaL61U4e/qmVyc3Iouuf8VJ2uyZPH5ZZtZkAXViaVvntbuQarFDQVaf782cvDg11pEDCrC4uuLZuWlAXCM5mZCoUS2RjIHVgFGo1mecGsqf9XY+OO+Pg5dyfNXgN0d3d/VPqQDXg5fz1pXtL04YNlT+8jz55MT9dSLLwm4TC9s9fy880/w4RdZb504aJarUFDMcgdWAsKhWKpfje1E1Cr79y65eHhbgrYF7RSSFBQTXW10W7m6ezpfUEBAZZqZkA/Jygw8Pv37zqdYc1ewvDg0JYtYeb4na3+LC4qYpNX+IOC3IGthqV6nb7ly5fDBw+yXWcXrn2O3x7X8bXDrtqPkONUSmXizp0WOb1PbLqSokd/Plzja0iD8aOHD8UL9mMQMXWiYZs2vXn9Wo8kO+QObDcgJbN3fP16/uxZLy9P/oLb9Nli8OPHjo0Mj9hhYyl6yRfPn7PImiqPz0s9cmTyZ4OENR2iFArlju3bBXzBXAunQnp13l5eFy9c6O3tRe8wyB3YsK3GRkev5ef7eHvTX/XCq4WkdZqnF167plFr7HNtjS5XxdOnJguuLO1OVzIkOKj727d1qS+iV/HyxXPJrIYK7BZcZyenyK1b869e7Wj/ypYP4Q8Ecgc2WMBO8bpOX1dbGxcba07VBKnfz9f3RUWFwWCw23m6TkdTnA4vT4+V1MzQ98qkUuZKrk9cTG+fUqFM2BHPF5jqoGjAPpGWdvPGjQ+N78fHxpgeA+gUBrkD28wd0x/wYP/ApQsXXFycF00y/OwBGxvT8uUL4yOtPV+6iQn1zoQdK0m7C/j8y5cuMXHxOnZCNj598ljMTkHE4sLr1/7zn//qDUYsnELuwIYDdlIUhY2mHaeL5WFmjj+lyG54aAgZWFaL1wsKlp12p2/cnZQkHx9fX43Sbx8fG4+OjKQpG72/UppJPH+O9xdyBzYcsPf8+HEi7bjU0dHMYjh3N7dbN0smJ3Gu5v/Kipo/fVpetTtfINi8aeN6pdp/H6VulZSw6Th6o0NDQujewLsMuQPbU5JarX5cVkZ/wwvsOP1bKobHD98S1lBfjx3nv4yRdCWX0UGMbYbc9MFaWmaSx2mY8fXxETKzNx6Pd/pUxrocdQu5A7A8GekMhum21rb9KfuYA5CF5qz4meodj6YO9A9gqj5XzDv97OkT8VJqZuh6enp6VldVWdX1JJWnpx3nC/g/GyHIpDXV1XjHIXdgGwlilUp16+ZNttLRHBnRl7m5ud4suaHRaDBJn2+8VMgV2+NizQzeKWb39PCofPPW2rxJz+ft69dS6c+ukPRydiUmTkyoEbxD7sCqtyYZ9IaPTU1JiYlC846XY6tiIiMi6uvqkIpZLM1lrHz7ViqVmnMYqZ+v77u3b63zAJPR0dGI8HCBQMjeABKJhHSP4B1yB9YasBuNI8MjV3Jy3N3czIwuWfunp6UNDAwYjdO4huYMn9lZWQvMh5h1C9626Kjmz5+tVpd6vSE76xL/r92q9HIOpKRoNJMY2iF3YHWVjsS7ysqoyEiBgG/mXhvmnEyvhw9KTRkHpGLMDntVStWx1FQBny/8+3Vm50AyqfT0qVNDg1ZdQkpTkMb6ehfnny3d6b8UENBoZHOt+SF3wGXXUMTd39d35nSmk0xm5i4bEXPURmJCwpfmZqRilhG8K5Wqa/n5Xp4edBl5PB6F6kKBwMXFed+ePdVVVewxIFa+fjA+Nh61devMDUPD0pXcHGRmIHdgJQG7Kc6qePZs88aNZi6csgt9zk5OV3JyFHIFIrVlj6l06To7Om7euHHu7NlzZ87cKCqiyFej0diKH/V6/aULF2bSd3RXxGzbJpfLp7BbFXIH6741ieRy/Giqo0RiZsDO5g22hIVVvq3U6wzYdL7ybBhNm2Yg3dvQHIjuH5pkyGTSmcyMi7NT0/v3GO8hd7DOW5MePngQFBjA5/HMDNiFQqHEweFEWlp/Xx/WTgEN7UNDQ2GbN8+UVNHAX1JcjHsDcgfrtTXJ2NbSeoA5vdrMs4HYgD0wIKC8rIyNN3El7Xm2YWA6hdEkQ6fTncrImMnM0Af79u6dWvNe85A7wNYko1KpvHWzxNfHx/wMOw0AIqFw357dXZ2dBuM0/m7tPJv3pbn55YsXfX19Wq32v//9v8o3b6SOP3czMe3mgymcR74OcgdruDXJYPj88WPyrl2mjUlmdxWnMcDL06OkuEg9oUYuFdBdVFxYKBIIgoOCjh9L/bO09NmTp54eHjNpd5lM9unjR9wqkDtYo4B9bGw8/+pVd3c387tWiUSiv4odP6PYEczcS+VlZTSTo3uD7iWKExwlkl/meffu3DFO/xvXCnIHqxuwUwxVX1sXGxNDf42ipQTsbm6u1wryFXK5Xo/KZfA/uVc8q5jd++yX5B7dOSfT0+m2QzQAuYNV/DscGR65dPGCi4uL+QcAsQH79ri49w2NBj2KHcGvN9W7ykrJb06fff8E+Pl1f/uGVXfIHaxKPYNep6+pro6OijSdXm12g1n6YlcXl4K8vPGxcWw1BMuQO33e2cmprqYGEz7IHVgW09akocGhC+fOOTk5LS1g5/NjY2IaG+pxJCZYQO51tbUz5TFzyl0iccDZe5A7sHDATlJ++/p1RHg4n883P8NOY4Crq+vV3NzR0TH8TYKF5d7Y0CBbsGWxUCi8c/s2tjJB7sAy1cds86+zZ07LzG7+NZNhjzMF7I16ZNiBJeROd1TO5ct6PXLukDuwQMCufVHxPDwszPytST8z7K4uV3JyxhCwAwvKnc/PzMhgAgUUzEDuYAUBe29PT8bJk1JHxyUF7EKBYMf27aYMO5PMwcUEZsq9vq5ugZw7GzSk7NuLgzsgd7D8gF2n1b14/nxT6MalBewCgZuba/7Vq/JxlMSAJcu96t1C1TJszj1s8yY0IYDcwXICdqYkZvBsZiZNkJcWsAuF8dvjaGZtQEkMWJbc37x+7bCg3EVisYuLC91jaEIAuYMlwJzRo6t882ZrRLj5ATvb1tHTw+NaQb58XI6AHSxb7g8flFKQsPCNRwFHbvZl7GOC3IF5MBn2wYHBM0sM2IXMI2lX4udPnxCwg5Wg1+uv5OQImHOxaSLIYx585iFgHuzNtmHDhqjIrXK5Aml3yB0sHrDTJLf6XVVkRMSSAnb62/P18blz+5ZCgSPxwIpXerS6tOPH6KYis2+NiLh04cL5s2czMzIOHzqYnLQrJjo6bPPmkOBgP1/f6MitgwMDiCQgd7DIXHh0ZDQ7K8tpKTXsTGdf0YGUlI72r0ajcWoKf2ZgpYs9KqUqYUc8G6RHR0ayKT6dztQmTK1WK+SK0dGxoaGhvt7ezo4O+mJcNMgdzBuwmyqL6xtitm0TmL3plA3Y/f38Su8/0Gg0CNiBpQq0fnz/4e/nS/ehqc2Ag8Orly9m1m/I7yx00zIrQ/pJ5GQgdzBfwE6RUX7eVVdXlyUF7KT31MOHO792oA87sGTCnTkR2/GvInc+n3/s6FHcYJA7WNL81xSwf2pqSoiPF5rdh50tiQkNDi5/9Cez9oWAHVg42ijIz5s574XCiKDAwJ4fP7SoioHcgXkFCQaVSlVyo9jTw8P8g5MotHeUSNLT0n58/24w4KRTYPmE+4RqYmfCjplJJBu/owEk5A7M+vuhv5POzs59e/eYf9IpG7Bv3rTp2dOnzIH0CKPAaiTcDR1fv3p5esyeR9KNd/Z0Jm45yB0sslpFdn9cXhYUEGB+sSOFUTKp9PSpU319fQjYwSpGHlrd6OhYdGTk7OUf+nhbVNTY6BhuPMgdzJvNHBwYyDyVIZE4CEwromYF7AIBPzIi4s2rVz+LE3AlwSrfpUWFhbNThRTFu7u5tba06LDAA7mD34sd9XpDXU3N1ogIPo9nfsDuJJNdOHduaHAQJTFgjSaXekNbayvZ/G8HN4rFTx6XI+0OuYNf106VStW1ggI3s8+wpliJLxBEbNny5vVrHbr1grVkSjsxMZGUmDg7eOfxeNmXsyB3yB38b+3UaJxub2tLStzJbiU1M2B3cXLKzsoaGhoy/TkhYAdrnpkpuVFM96F41prqgZQUdG+H3MHPtVPtlLa87JG/r69p7dTMgJ3P3xYdVVdbq9fpkWEH6zXX/NjU5OLsPJM/pNAkPCxsdHQUk0jIHbGPcXhoODMjQyKRCM1bOyWtOzs5Xc7KGhkZxfwXrO+Mc2xsPHLr1pksIoUdvj4+37u7EXBA7vZext5QXx+1dauZxY4/A/aoqJrqamTYgZWUAJxMT59Ju9Nt7OLk/KGxETuiIXf7Nbt6Qn3r5k03V1fz105dXV1zsrNHRkYQsAPrmXreu3tXOLNPlRCJZncQA5C7fZldpVKdycw0f+1UJBb7+HhXvn2L4zWAtaXd6+vqnGTSmaknBSuPy8sgd4vz/7hPMHcbDenFAAAAAElFTkSuQmCC" />
img {
max-height: 90%;
max-width: 90%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid rgb(44,44,44);
}
@kafeltz
Copy link

kafeltz commented Mar 15, 2014

Pretty awesome simple solution i ever seen.

@Viktor-Bredihin
Copy link

awesome solution, but works only start from ie10, have an idea how to do it in ie9? Maybe some hack?

@Viktor-Bredihin
Copy link

sorry, works from ie8, perfect solution, thanks

@qLb
Copy link

qLb commented Jun 10, 2014

Awesome solution!

@faisalashfaq
Copy link

Elegant solution! 👍 Is there a way through which I can make it work with the incorporation of Bootstrap ".img-responsive" class?

@tiosecurity
Copy link

Excellent, thank you!

@RaisaJari
Copy link

Beautiful - thanks!

@karen-sanchez
Copy link

Awesome. Thank you!

@lorenareyes
Copy link

Excellent. Many thanks for sharing it!

@juliocesarbr
Copy link

Thanks for this. Helps me a lot.

@nelsondmayorga
Copy link

That's what I need. Thanks!

@MohamedOsamaAbdellah
Copy link

Great Solution , Thanks alot

@Mayank-Behl
Copy link

This is great !
Thanks

@ledautopica
Copy link

ledautopica commented Feb 19, 2021

Thank you, my brain was melting :p

@xino1010
Copy link

xino1010 commented May 3, 2021

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment