<p>What is the best way to vertically center the content of a div when the height of the content is variable.  In my particular case, the height of the container div is fixed, but it would be great if there were a solution that would work in cases where the container has a variable height as well. Also, I would love a solution with no, or very little use of CSS hacks and/or non-semantic markup.</p>

<p><img src="https://content.screencast.com/users/jessegavin/folders/Jing/media/ba5c2688-0aad-4e89-878a-8911946f8612/2008-09-12_1027.png" alt="alt text"></p>

[{'answer_id': 59324, 'author': 'Prestaul', 'author_id': 5628, 'author_profile': 'https://Stackoverflow.com/users/5628', 'pm_score': 4, 'selected': False, 'text': '<p>This is something I have needed to do many times and a consistent solution still requires you add a little non-semantic markup and some browser specific hacks.  When we get browser support for css 3 you\'ll get your vertical centering without sinning.</p>\n\n<p>For a better explanation of the technique you can look <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="nofollow noreferrer">the article I adapted it from</a>, but basically it involves adding an extra element and applying different styles in IE and browsers that support <code>position:table\\table-cell</code> on non-table elements.</p>\n\n<pre><code>&lt;div class="valign-outer"&gt;\n    &lt;div class="valign-middle"&gt;\n        &lt;div class="valign-inner"&gt;\n            Excuse me. What did you sleep in your clothes again last night. Really. You\'re gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe\'s untied. Don\'t be so gullible, McFly. You got the place fixed up nice, McFly. I have you\'re car towed all the way to your house and all you\'ve got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n\n&lt;style&gt;\n    /* Non-structural styling */\n    .valign-outer { height: 400px; border: 1px solid red; }\n    .valign-inner { border: 1px solid blue; }\n&lt;/style&gt;\n\n&lt;!--[if lte IE 7]&gt;\n&lt;style&gt;\n    /* For IE7 and earlier */\n    .valign-outer { position: relative; overflow: hidden; }\n    .valign-middle { position: absolute; top: 50%; }\n    .valign-inner { position: relative; top: -50% }\n&lt;/style&gt;\n&lt;![endif]--&gt;\n&lt;!--[if gt IE 7]&gt; --&gt;\n&lt;style&gt;\n    /* For other browsers */\n    .valign-outer { position: static; display: table; overflow: hidden; }\n    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }\n&lt;/style&gt;\n</code></pre>\n\n<p>There are many ways (hacks) to apply styles in specific sets of browsers. I used conditional comments but look at the article linked above to see two other techniques.</p>\n\n<p><em>Note: There are simple ways to get vertical centering if you know some heights in advance, if you are trying to center a single line of text, or in several other cases.  If you have more details then throw them in because there may be a method that doesn\'t require browser hacks or non-semantic markup.</em></p>\n\n<p><strong>Update:</strong> We are beginning to get better browser support for CSS3, bringing both flex-box and transforms as alternative methods for getting vertical centering (among other effects). See <a href="https://stackoverflow.com/questions/5412912/align-vertically-using-css-3">this other question</a> for more information about modern methods, but keep in mind that browser support is still sketchy for CSS3.</p>\n'}, {'answer_id': 13075912, 'author': 'Fadi', 'author_id': 856921, 'author_profile': 'https://Stackoverflow.com/users/856921', 'pm_score': 7, 'selected': False, 'text': '<p>This seems to be the best solution I’ve found to this problem, as long as your browser supports the <code>::before</code> pseudo element: <a href="http://css-tricks.com/centering-in-the-unknown/" rel="noreferrer">CSS-Tricks: Centering in the Unknown</a>.</p>\n\n<p>It doesn’t require any extra markup and seems to work extremely well.  I couldn’t use the <code>display: table</code> method because <code>table</code> elements don’t obey the <code>max-height</code> property.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.block {\r\n  height: 300px;\r\n  text-align: center;\r\n  background: #c0c0c0;\r\n  border: #a0a0a0 solid 1px;\r\n  margin: 20px;\r\n}\r\n\r\n.block::before {\r\n  content: \'\';\r\n  display: inline-block;\r\n  height: 100%; \r\n  vertical-align: middle;\r\n  margin-right: -0.25em; /* Adjusts for spacing */\r\n\r\n  /* For visualization \r\n  background: #808080; width: 5px;\r\n  */\r\n}\r\n\r\n.centered {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  width: 300px;\r\n  padding: 10px 15px;\r\n  border: #a0a0a0 solid 1px;\r\n  background: #f5f5f5;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="block"&gt;\r\n    &lt;div class="centered"&gt;\r\n        &lt;h1&gt;Some text&lt;/h1&gt;\r\n        &lt;p&gt;But he stole up to us again, and suddenly clapping his hand on my\r\n           shoulder, said&amp;mdash;"Did ye see anything looking like men going\r\n           towards that ship a while ago?"&lt;/p&gt;\r\n    &lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 20434170, 'author': 'dougli', 'author_id': 3076093, 'author_profile': 'https://Stackoverflow.com/users/3076093', 'pm_score': 3, 'selected': False, 'text': '<p>Using the child selector, I\'ve taken <a href="https://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div/13075912#13075912">Fadi\'s incredible answer</a> above and boiled it down to just one CSS rule that I can apply. Now all I have to do is add the <code>contentCentered</code> class name to elements I want to center:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.contentCentered {\r\n  text-align: center;\r\n}\r\n\r\n.contentCentered::before {\r\n  content: \'\';\r\n  display: inline-block;\r\n  height: 100%; \r\n  vertical-align: middle;\r\n  margin-right: -.25em; /* Adjusts for spacing */\r\n}\r\n\r\n.contentCentered &gt; * {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contentCentered"&gt;\r\n  &lt;div&gt;\r\n    &lt;h1&gt;Some text&lt;/h1&gt;\r\n    &lt;p&gt;But he stole up to us again, and suddenly clapping his hand on my\r\n      shoulder, said&amp;mdash;"Did ye see anything looking like men going\r\n      towards that ship a while ago?"&lt;/p&gt;\r\n  &lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Forked CodePen: <a href="http://codepen.io/dougli/pen/Eeysg" rel="nofollow noreferrer">http://codepen.io/dougli/pen/Eeysg</a></p>\n'}, {'answer_id': 26125596, 'author': 'user3432605', 'author_id': 3432605, 'author_profile': 'https://Stackoverflow.com/users/3432605', 'pm_score': 0, 'selected': False, 'text': '<p>This is my awesome solution for a <code>div</code> with a dynamic (percentaged) height.</p>\n\n<p><strong>CSS</strong></p>\n\n<pre class="lang-css prettyprint-override"><code>.vertical_placer{\n  background:red;\n  position:absolute; \n  height:43%; \n  width:100%;\n  display: table;\n}\n\n.inner_placer{  \n  display: table-cell;\n  vertical-align: middle;\n  text-align:center;\n}\n\n.inner_placer svg{\n  position:relative;\n  color:#fff;\n  background:blue;\n  width:30%;\n  min-height:20px;\n  max-height:60px;\n  height:20%;\n}\n</code></pre>\n\n<p><strong>HTML</strong></p>\n\n<pre><code>&lt;div class="footer"&gt;\n    &lt;div class="vertical_placer"&gt;\n        &lt;div class="inner_placer"&gt;\n            &lt;svg&gt; some Text here&lt;/svg&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;  \n</code></pre>\n\n<p><a href="http://jsfiddle.net/hunter74/oosb3s8w/1/" rel="nofollow">Try this by yourself.</a></p>\n'}, {'answer_id': 27663253, 'author': 'BlackCetha', 'author_id': 4396938, 'author_profile': 'https://Stackoverflow.com/users/4396938', 'pm_score': 8, 'selected': True, 'text': '<p>Just add</p>\n\n<pre><code>position: relative;\ntop: 50%;\ntransform: translateY(-50%);\n</code></pre>\n\n<p>to the inner div.</p>\n\n<p>What it does is moving the inner div\'s top border to the half height of the outer div (<code>top: 50%;</code>) and then the inner div up by half its height (<code>transform: translateY(-50%)</code>). This will work with <code>position: absolute</code> or <code>relative</code>.</p>\n\n<p>Keep in mind that <code>transform</code> and <code>translate</code> have vendor prefixes which are not included for simplicity.</p>\n\n<p>Codepen: <a href="http://codepen.io/anon/pen/ZYprdb" rel="noreferrer">http://codepen.io/anon/pen/ZYprdb</a></p>\n'}, {'answer_id': 37294825, 'author': 'Loïc G.', 'author_id': 953096, 'author_profile': 'https://Stackoverflow.com/users/953096', 'pm_score': 2, 'selected': False, 'text': '<p>You can use margin auto. With flex, the div seems to be centered vertically too.</p>\n\n\n\n<pre class="lang-css prettyprint-override"><code>body,\nhtml {\n  height: 100%;\n  margin: 0;\n}\n.site {\n  height: 100%;\n  display: flex;\n}\n.site .box {\n  background: #0ff;\n  max-width: 20vw;\n  margin: auto;\n}\n</code></pre>\n\n<pre class="lang-html prettyprint-override"><code>&lt;div class="site"&gt;\n  &lt;div class="box"&gt;\n    &lt;h1&gt;blabla&lt;/h1&gt;\n    &lt;p&gt;blabla&lt;/p&gt;\n    &lt;p&gt;blablabla&lt;/p&gt;\n    &lt;p&gt;lbibdfvkdlvfdks&lt;/p&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n\n\n'}, {'answer_id': 40712796, 'author': 'Leo Dimuccio', 'author_id': 7187602, 'author_profile': 'https://Stackoverflow.com/users/7187602', 'pm_score': 2, 'selected': False, 'text': '<p>Best result for me so far: </p>\n\n<p>div to be centered:</p>\n\n<pre><code>position: absolute;\ntop: 50%;\ntransform: translateY(-50%);\nmargin: 0 auto;\nright: 0;\nleft: 0;\n</code></pre>\n'}, {'answer_id': 58139571, 'author': 'Leandro Castro', 'author_id': 3594412, 'author_profile': 'https://Stackoverflow.com/users/3594412', 'pm_score': 1, 'selected': False, 'text': '<p>For me the best way to do this is:</p>\n\n<pre><code>.container{\n  position: relative;\n}\n\n.element{\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n}\n</code></pre>\n\n<p>The advantage is not having to make the height explicit</p>\n'}, {'answer_id': 61923425, 'author': 'hassan yousefi', 'author_id': 12637216, 'author_profile': 'https://Stackoverflow.com/users/12637216', 'pm_score': 4, 'selected': False, 'text': '<p>you can use flex display such as below code:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.example{\r\n  background-color:red;\r\n  height:90px;\r\n  width:90px;\r\n  display:flex;\r\n  align-items:center; /*for vertically center*/\r\n  justify-content:center; /*for horizontally center*/\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="example"&gt;\r\n    &lt;h6&gt;Some text&lt;/h6&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/59309', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5651/']