<p>I have a <code>div</code> with two images and an <code>h1</code>. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be <code>absolute</code> positioned within the <code>div</code>.</p>
<p>What is the CSS needed for this to work on all common browsers?</p>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;header&quot;&gt;
  &lt;img src=&quot;..&quot; &gt;&lt;/img&gt;
  &lt;h1&gt;testing...&lt;/h1&gt;
  &lt;img src=&quot;...&quot;&gt;&lt;/img&gt;
&lt;/div&gt;
</code></pre>

[{'answer_id': 79513, 'author': 'dimarzionist', 'author_id': 10778, 'author_profile': 'https://Stackoverflow.com/users/10778', 'pm_score': -1, 'selected': False, 'text': '<pre><code>&lt;div id="header" style="display: table-cell; vertical-align:middle;"&gt;\n</code></pre>\n\n<p>...</p>\n\n<p>or CSS</p>\n\n<pre><code>.someClass\n{\n   display: table-cell;\n   vertical-align:middle;\n}\n</code></pre>\n\n<p><a href="http://caniuse.com/#search=table-cell" rel="noreferrer"><strong>Browser Coverage</strong></a></p>\n'}, {'answer_id': 79550, 'author': 'Mike Tunnicliffe', 'author_id': 13956, 'author_profile': 'https://Stackoverflow.com/users/13956', 'pm_score': 2, 'selected': False, 'text': '<p>By default h1 is a block element and will render on the line after the first img, and will cause the second img to appear on the line following the block.</p>\n<p>To stop this from occurring you can set the h1 to have inline flow behaviour:</p>\n<pre><code>#header &gt; h1 { display: inline; }\n</code></pre>\n<p>As for absolutely positioning the img <em>inside the div</em>, you need to set the containing div to have a &quot;known size&quot; before this will work properly.  In my experience, you also need to change the position attribute away from the default - position: relative works for me:</p>\n<pre><code>#header { position: relative; width: 20em; height: 20em; }\n#img-for-abs-positioning { position: absolute; top: 0; left: 0; }\n</code></pre>\n<p>If you can get that to work, you might want to try progressively removing the height, width, position attributes from div.header to get the minimal required attributes to get the effect you want.</p>\n<p><strong>UPDATE:</strong></p>\n<p>Here is a complete example that works on Firefox 3:</p>\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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"\n              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;\n    &lt;html&gt;\n        &lt;head&gt;\n            &lt;title&gt;Example of vertical positioning inside a div&lt;/title&gt;\n            &lt;style type="text/css"&gt;\n                #header &gt; h1 { display: inline; }\n                #header { border: solid 1px red; \n                          position: relative; }\n                #img-for-abs-positioning { position: absolute;\n                                           bottom: -1em; right: 2em; }\n            &lt;/style&gt;\n        &lt;/head&gt;\n    \n        &lt;body&gt;\n            &lt;div id="header"&gt;\n                &lt;img src="#" alt="Image 1" width="40" height="40" /&gt;\n                &lt;h1&gt;Header&lt;/h1&gt;\n                &lt;img src="#" alt="Image 2" width="40" height="40" \n                     id="img-for-abs-positioning" /&gt;\n            &lt;/div&gt;\n        &lt;/body&gt;\n    &lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 80036, 'author': 'Shog9', 'author_id': 811, 'author_profile': 'https://Stackoverflow.com/users/811', 'pm_score': 4, 'selected': False, 'text': '<blockquote>\n  <p>All of them need to be vertically aligned within the div</p>\n</blockquote>\n\n<p>Aligned <em>how</em>? Tops of the images aligned with the top of the text? </p>\n\n<blockquote>\n  <p>One of the images needs to be absolute positioned within the div.</p>\n</blockquote>\n\n<p>Absolutely positioned relative to the DIV? Perhaps you could sketch out what you\'re looking for...?</p>\n\n<p><a href="https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div#79550">fd has described</a> the steps for absolute positioning, as well as adjusting the display of the <code>H1</code> element such that images will appear inline with it. To that, i\'ll add that you can align the images by use of the <code>vertical-align</code> style:</p>\n\n<pre><code>#header h1 { display: inline; }\n#header img { vertical-align: middle; }\n</code></pre>\n\n<p>...this would put the header and images together, with top edges aligned. Other alignment options exist; <a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" rel="nofollow noreferrer">see the documentation</a>. You might also find it beneficial to drop the DIV and move the images inside the <code>H1</code> element - this provides semantic value to the container, and removes the need to adjust the display of the <code>H1</code>:</p>\n\n<pre><code>&lt;h1 id=header"&gt;\n   &lt;img src=".." &gt;&lt;/img&gt;\n   testing...\n   &lt;img src="..."&gt;&lt;/img&gt;\n&lt;/h1&gt;\n</code></pre>\n'}, {'answer_id': 84616, 'author': 'Konrad Rudolph', 'author_id': 1968, 'author_profile': 'https://Stackoverflow.com/users/1968', 'pm_score': 11, 'selected': True, 'text': '<p>Wow, this problem is popular. It\'s based on a misunderstanding in the <code>vertical-align</code> property. This excellent article explains it:</p>\n<p><a href="http://phrogz.net/CSS/vertical-align/index.html" rel="noreferrer">Understanding <code>vertical-align</code>, or &quot;How (Not) To Vertically Center Content&quot;</a> by Gavin Kistner.</p>\n<p><strong><a href="http://howtocenterincss.com/" rel="noreferrer">“How to center in CSS”</a></strong> is a great web tool which helps to find the necessary CSS centering attributes for different situations.</p>\n<hr />\n<p>In a nutshell <sub><sup>(and to prevent link rot)</sup></sub>:</p>\n<ul>\n<li><strong>Inline elements</strong> (and <em>only</em> inline elements) can be vertically aligned in their context via <code>vertical-align: middle</code>. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. <a href="http://jsfiddle.net/jBthq/" rel="noreferrer">jsfiddle example</a></li>\n<li>For block elements, vertical alignment is harder and strongly depends on the specific situation:\n<ul>\n<li>If the inner element can have a <strong>fixed height</strong>, you can make its position <code>absolute</code> and specify its <code>height</code>, <code>margin-top</code> and <code>top</code> position. <a href="http://jsfiddle.net/YFncP/2/" rel="noreferrer">jsfiddle example</a></li>\n<li>If the centered element <strong>consists of a single line</strong> <em>and</em> <strong>its parent height is fixed</strong> you can simply set the container’s <code>line-height</code> to fill its height. This method is quite versatile in my experience. <a href="http://jsfiddle.net/d4zGF/" rel="noreferrer">jsfiddle example</a></li>\n<li>… there are more such special cases.</li>\n</ul>\n</li>\n</ul>\n'}, {'answer_id': 5962720, 'author': 'Romain', 'author_id': 305288, 'author_profile': 'https://Stackoverflow.com/users/305288', 'pm_score': 6, 'selected': False, 'text': '<p>It worked for me:</p>\n\n<pre class="lang-css prettyprint-override"><code>.vcontainer {\n    min-height: 10em;\n    display: table-cell;\n    vertical-align: middle;\n}\n</code></pre>\n'}, {'answer_id': 9967286, 'author': 'Anita Mandal', 'author_id': 1146211, 'author_profile': 'https://Stackoverflow.com/users/1146211', 'pm_score': 4, 'selected': False, 'text': '<p>Use this formula, and it will work always without cracks:</p>\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>#outer {height: 400px; overflow: hidden; position: relative;}\n#outer[id] {display: table; position: static;}\n\n#middle {position: absolute; top: 50%;} /* For explorer only*/\n#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}\n\n#inner {position: relative; top: -50%} /* For explorer only */\n/* Optional: #inner[id] {position: static;} */</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;\n  &lt;div id="middle"&gt;\n    &lt;div id="inner"&gt;\n      any text\n      any height\n      any content, for example generated from DB\n      everything is vertically centered\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 10181095, 'author': 'abernier', 'author_id': 133327, 'author_profile': 'https://Stackoverflow.com/users/133327', 'pm_score': 5, 'selected': False, 'text': '<p>A technique from a friend of mine:</p>\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>div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}\ndiv p {display:inline-block;}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="height:100px; border:1px solid;"&gt;\n    &lt;p style="border:1px dotted;"&gt;I\'m vertically centered.&lt;/p&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Demo <a href="http://dabblet.com/gist/2867324" rel="nofollow noreferrer">here</a>.</p>\n'}, {'answer_id': 16357586, 'author': 'user2346571', 'author_id': 2346571, 'author_profile': 'https://Stackoverflow.com/users/2346571', 'pm_score': 7, 'selected': False, 'text': '<p>I used this very simple code:</p>\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>div.ext-box { display: table; width:100%;}\ndiv.int-box { display: table-cell; vertical-align: middle; }</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ext-box"&gt;\n    &lt;div class="int-box"&gt;\n        &lt;h2&gt;Some txt&lt;/h2&gt;\n        &lt;p&gt;bla bla bla&lt;/p&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Obviously, whether you use a <code>.class</code> or an <code>#id</code>, the result won\'t change.</p>\n'}, {'answer_id': 19131573, 'author': 'Joel Moses', 'author_id': 2837597, 'author_profile': 'https://Stackoverflow.com/users/2837597', 'pm_score': -1, 'selected': False, 'text': '<p>Just this:</p>\n\n<pre class="lang-html prettyprint-override"><code>&lt;div&gt;\n    &lt;table style="width: 100%; height: 100%"&gt;\n        &lt;tr&gt;\n            &lt;td style="width: 100%; height: 100%; vertical-align: middle;"&gt;\n               What ever you want vertically-aligned\n            &lt;/td&gt;\n        &lt;/tr&gt;\n    &lt;/table&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>A one-cell table inside the div handles the vertical-align and is backward compatible back to the Stone Age!</p>\n'}, {'answer_id': 19131774, 'author': 'Joel Moses', 'author_id': 2837597, 'author_profile': 'https://Stackoverflow.com/users/2837597', 'pm_score': 1, 'selected': False, 'text': '<p>Just use a one-cell table inside the div! Just set the cell and table height and with to 100% and you can use the vertical-align.</p>\n\n<p>A one-cell table inside the div handles the vertical-align and is backward compatible back to the Stone Age!</p>\n'}, {'answer_id': 20149753, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': -1, 'selected': False, 'text': '<p>Here is just another (responsive) approach:</p>\n\n<pre><code>html,\n    body {\n        height: 100%;\n    }\n    body {\n        margin: 0;\n    }\n\n    .table {\n        display: table;\n        width:  auto;\n        table-layout:auto;\n        height: 100%;\n    }\n        .table:nth-child(even) {\n            background: #a9edc3;\n        }\n        .table:nth-child(odd) {\n            background: #eda9ce;\n        }\n\n    .tr {\n        display: table-row;\n    }\n    .td {\n        display: table-cell;\n        width: 50%;\n        vertical-align: middle;\n    }\n</code></pre>\n\n<p><a href="http://jsfiddle.net/herrfischerhamburg/JcVxz/" rel="nofollow noreferrer">http://jsfiddle.net/herrfischerhamburg/JcVxz/</a></p>\n'}, {'answer_id': 20920505, 'author': 'pr0gg3r', 'author_id': 1159244, 'author_profile': 'https://Stackoverflow.com/users/1159244', 'pm_score': -1, 'selected': False, 'text': '<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;\n&lt;html&gt;\n    &lt;head&gt;\n        &lt;style type="text/css"&gt;\n            #style_center { position:relative; top:50%; left:50%; }\n            #style_center_absolute { position:absolute; top:50px; left:50px; }\n            &lt;!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }--&gt;\n        &lt;/style&gt;\n    &lt;/head&gt;\n\n    &lt;body&gt;\n        &lt;div style="height:200px; width:200px; background:#00FF00"&gt;\n            &lt;div id="style_center"&gt;+&lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n'}, {'answer_id': 21202703, 'author': 'Shadoweb', 'author_id': 1063653, 'author_profile': 'https://Stackoverflow.com/users/1063653', 'pm_score': 4, 'selected': False, 'text': '<p>Almost all methods needs to specify the height, but often we don\'t have any heights.</p>\n<p>So here is a CSS\xa03 three-line trick that doesn\'t require to know the height.</p>\n<pre><code>.element {\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n}\n</code></pre>\n<p>It\'s supported even in IE9.</p>\n<p>with its vendor prefixes:</p>\n<pre><code>.element {\n    position: relative;\n    top: 50%;\n    -webkit-transform: translateY(-50%);\n    -ms-transform: translateY(-50%);\n    transform: translateY(-50%);\n}\n</code></pre>\n<p>Source: <em><a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/" rel="nofollow noreferrer">Vertical align anything with just 3 lines of CSS</a></em></p>\n'}, {'answer_id': 24985086, 'author': 'Arsh', 'author_id': 3882353, 'author_profile': 'https://Stackoverflow.com/users/3882353', 'pm_score': 0, 'selected': False, 'text': '<p><strong>I have been using the following solution (with no positioning and no line height) since over a year, it works with <a href="https://en.wikipedia.org/wiki/Internet_Explorer_7" rel="nofollow noreferrer">Internet\xa0Explorer\xa07</a> and <a href="https://en.wikipedia.org/wiki/Internet_Explorer_8" rel="nofollow noreferrer">Internet\xa0Explorer\xa08</a> as well.</strong></p>\n<pre><code>&lt;style&gt;\n.outer {\n    font-size: 0;\n    width: 400px;\n    height: 400px;\n    background: orange;\n    text-align: center;\n    display: inline-block;\n}\n\n.outer .emptyDiv {\n    height: 100%;\n    background: orange;\n    visibility: collapse;\n}\n\n.outer .inner {\n    padding: 10px;\n    background: red;\n    font: bold 12px Arial;\n}\n\n.verticalCenter {\n    display: inline-block;\n    *display: inline;\n    zoom: 1;\n    vertical-align: middle;\n}\n&lt;/style&gt;\n\n&lt;div class=&quot;outer&quot;&gt;\n    &lt;div class=&quot;emptyDiv verticalCenter&quot;&gt;&lt;/div&gt;\n    &lt;div class=&quot;inner verticalCenter&quot;&gt;\n        &lt;p&gt;Line 1&lt;/p&gt;\n        &lt;p&gt;Line 2&lt;/p&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 25867805, 'author': 'danigonlinea', 'author_id': 1196978, 'author_profile': 'https://Stackoverflow.com/users/1196978', 'pm_score': 0, 'selected': False, 'text': '<p>This is my personal solution for an <code>i</code> element inside a <code>div</code>.</p>\n<p><a href="http://jsfiddle.net/3FvxA/683/" rel="nofollow noreferrer">JSFiddle Example</a></p>\n<h2>HTML</h2>\n<pre><code>&lt;div class=&quot;circle&quot;&gt;\n    &lt;i class=&quot;fa fa-plus icon&quot;&gt;\n&lt;/i&gt;&lt;/div&gt;\n</code></pre>\n<h2>CSS</h2>\n<pre><code>.circle {\n   border-radius: 50%;\n   color: blue;\n   background-color: red;\n   height:100px;\n   width:100px;\n   text-align: center;\n   line-height: 100px;\n}\n\n.icon {\n  font-size: 50px;\n  vertical-align: middle;\n}\n</code></pre>\n'}, {'answer_id': 26356771, 'author': 'VuesomeDev', 'author_id': 1725325, 'author_profile': 'https://Stackoverflow.com/users/1725325', 'pm_score': 5, 'selected': False, 'text': '<p>To position block elements to the center (works in <a href="https://en.wikipedia.org/wiki/Internet_Explorer_9" rel="nofollow noreferrer">Internet\xa0Explorer\xa09</a> and above), it needs a wrapper <code>div</code>:</p>\n<pre><code>.vcontainer {\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n  -webkit-transform: translateY(-50%);\n}\n</code></pre>\n'}, {'answer_id': 26364552, 'author': 'joan16v', 'author_id': 1398876, 'author_profile': 'https://Stackoverflow.com/users/1398876', 'pm_score': 4, 'selected': False, 'text': '<p>My trick is to put a table inside the div with one row and one column, set 100% of width and height, and the property <em>vertical-align:middle</em>:</p>\n<pre><code>&lt;div&gt;\n\n    &lt;table style=&quot;width:100%; height:100%;&quot;&gt;\n        &lt;tr&gt;\n            &lt;td style=&quot;vertical-align:middle;&quot;&gt;\n                BUTTON TEXT\n            &lt;/td&gt;\n        &lt;/tr&gt;\n    &lt;/table&gt;\n\n&lt;/div&gt;\n</code></pre>\n<p>Fiddle:\n<a href="http://jsfiddle.net/joan16v/sbqjnn9q/" rel="nofollow noreferrer">http://jsfiddle.net/joan16v/sbqjnn9q/</a></p>\n'}, {'answer_id': 31078418, 'author': 'E. Serrano', 'author_id': 1572964, 'author_profile': 'https://Stackoverflow.com/users/1572964', 'pm_score': 8, 'selected': False, 'text': '<p>Now that Flexbox support is increasing, this CSS applied to the containing element would vertically center all contained items (except for those items that specify the alignment themselves, e.g. <a href="https://developer.mozilla.org/docs/Web/CSS/align-self" rel="noreferrer"><code>align-self:start</code></a>)</p>\n<pre class="lang-css prettyprint-override"><code>.container {\n    display: flex;\n    align-items: center;\n}\n</code></pre>\n<p>Use the prefixed version if you also need to target <a href="https://en.wikipedia.org/wiki/Internet_Explorer_11#Internet_Explorer_10" rel="noreferrer">Internet\xa0Explorer\xa010</a>, and older (&lt; <a href="https://en.wikipedia.org/wiki/Android_version_history#Android_4.4_KitKat_.28API_level_19.29" rel="noreferrer">4.4</a> (KitKat)) Android browsers:</p>\n<pre class="lang-css prettyprint-override"><code>.container {\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n\n    -ms-flex-align: center;\n    -webkit-align-items: center;\n    -webkit-box-align: center;\n    align-items: center;\n}\n</code></pre>\n'}, {'answer_id': 31279382, 'author': 'BernieSF', 'author_id': 1689852, 'author_profile': 'https://Stackoverflow.com/users/1689852', 'pm_score': 0, 'selected': False, 'text': '<p>For me, it worked this way:</p>\n\n<pre><code>&lt;div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px"&gt;\n    &lt;a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary"&gt;Login&lt;/a&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>The "a" element converted to a button, using Bootstrap classes, and it is now vertically centered inside an outer "div".</p>\n'}, {'answer_id': 34320593, 'author': 'Henk-Martijn', 'author_id': 4069967, 'author_profile': 'https://Stackoverflow.com/users/4069967', 'pm_score': 3, 'selected': False, 'text': '<p>Using CSS to vertical center, you can let the outer containers act like a table, and the content as a table cell. In this format your objects will stay centered. :)</p>\n<p>I nested multiple objects in JSFiddle for an example, but the core idea is like this:</p>\n<p><strong>HTML</strong></p>\n<pre><code>&lt;div class=&quot;circle&quot;&gt;\n  &lt;div class=&quot;content&quot;&gt;\n    Some text\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p><strong>CSS</strong></p>\n<pre class="lang-css prettyprint-override"><code>.circle {\n  /* Act as a table so we can center vertically its child */\n  display: table;\n  /* Set dimensions */\n  height: 200px;\n  width: 200px;\n  /* Horizontal center text */\n  text-align: center;\n  /* Create a red circle */\n  border-radius: 100%;\n  background: red;\n}\n\n.content {\n  /* Act as a table cell */\n  display: table-cell;\n  /* And now we can vertically center! */\n  vertical-align: middle;\n  /* Some basic markup */\n  font-size: 30px;\n  font-weight: bold;\n  color: white;\n}\n</code></pre>\n<p>The multiple objects example:</p>\n<p><strong>HTML</strong></p>\n<pre><code>&lt;div class=&quot;container&quot;&gt;\n  &lt;div class=&quot;content&quot;&gt;\n\n    &lt;div class=&quot;centerhoriz&quot;&gt;\n\n      &lt;div class=&quot;circle&quot;&gt;\n        &lt;div class=&quot;content&quot;&gt;\n          Some text\n        &lt;/div&gt;&lt;!-- content --&gt;\n      &lt;/div&gt;&lt;!-- circle --&gt;\n\n      &lt;div class=&quot;square&quot;&gt;\n        &lt;div class=&quot;content&quot;&gt;\n          &lt;div id=&quot;smallcircle&quot;&gt;&lt;/div&gt;\n        &lt;/div&gt;&lt;!-- content --&gt;\n      &lt;/div&gt;&lt;!-- square --&gt;\n\n    &lt;/div&gt;&lt;!-- center-horiz --&gt;\n\n  &lt;/div&gt;&lt;!-- content --&gt;\n&lt;/div&gt;&lt;!-- container --&gt;\n</code></pre>\n<p><strong>CSS</strong></p>\n<pre class="lang-css prettyprint-override"><code>.container {\n  display: table;\n  height: 500px;\n  width: 300px;\n  text-align: center;\n  background: lightblue;\n}\n\n.centerhoriz {\n  display: inline-block;\n}\n\n.circle {\n  display: table;\n  height: 200px;\n  width: 200px;\n  text-align: center;\n  background: red;\n  border-radius: 100%;\n  margin: 10px;\n}\n\n.square {\n  display: table;\n  height: 200px;\n  width: 200px;\n  text-align: center;\n  background: blue;\n  margin: 10px;\n}\n\n.content {\n  display: table-cell;\n  vertical-align: middle;\n  font-size: 30px;\n  font-weight: bold;\n  color: white;\n}\n\n#smallcircle {\n  display: inline-block;\n  height: 50px;\n  width: 50px;\n  background: green;\n  border-radius: 100%;\n}\n</code></pre>\n<p><strong>Result</strong></p>\n<p><a href="https://i.stack.imgur.com/p1Cyh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p1Cyh.png" alt="Result" /></a></p>\n<p><a href="https://jsfiddle.net/martjemeyer/ybs032uc/1/" rel="nofollow noreferrer">https://jsfiddle.net/martjemeyer/ybs032uc/1/</a></p>\n'}, {'answer_id': 39904652, 'author': 'Dashrath', 'author_id': 1510544, 'author_profile': 'https://Stackoverflow.com/users/1510544', 'pm_score': 2, 'selected': False, 'text': '<p>We may use a CSS function calculation to calculate the size of the element and then position the child element accordingly.</p>\n<p>Example HTML:</p>\n<pre><code>&lt;div class=&quot;box&quot;&gt;\n    &lt;span&gt;&lt;a href=&quot;#&quot;&gt;Some Text&lt;/a&gt;&lt;/span&gt;\n&lt;/div&gt;\n</code></pre>\n<p>And CSS:</p>\n<pre class="lang-css prettyprint-override"><code>.box {\n    display: block;\n    background: #60D3E8;\n    position: relative;\n    width: 300px;\n    height: 200px;\n    text-align: center;\n}\n\n.box span {\n    font: bold 20px/20px \'source code pro\', sans-serif;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: calc(50% - 10px);\n}\n\na {\n    color: white;\n    text-decoration: none;\n}\n</code></pre>\n<p>Demo created here: <a href="https://jsfiddle.net/xnjq1t22/" rel="nofollow noreferrer">https://jsfiddle.net/xnjq1t22/</a></p>\n<p>This solution works well with responsive <code>div</code> <code>height</code> and <code>width</code> as well.</p>\n<p>Note: The <em>calc</em> function is not tested for compatiblity with old browsers.</p>\n'}, {'answer_id': 45458436, 'author': 'Shivam', 'author_id': 1592107, 'author_profile': 'https://Stackoverflow.com/users/1592107', 'pm_score': 2, 'selected': False, 'text': '<p>I have found a new workaround to vertically align multiple text-lines in a div using CSS\xa03 (and I am also using bootstrap v3 grid system to beautify the UI), which is as below:</p>\n<pre class="lang-css prettyprint-override"><code>.immediate-parent-of-text-containing-div {\n    height: 50px;         /* Or any fixed height that suits you. */\n}\n\n.text-containing-div {\n    display: inline-grid;\n    align-items: center;\n    text-align: center;\n    height: 100%;\n}\n</code></pre>\n<p>As per my understanding, the immediate parent of text containing element must have some height.</p>\n'}, {'answer_id': 48523051, 'author': 'WasiF', 'author_id': 4574281, 'author_profile': 'https://Stackoverflow.com/users/4574281', 'pm_score': 5, 'selected': False, 'text': '<h2>Vertically and horizontally align element</h2>\n<p>Use either of these. The result would be the same:</p>\n<ol>\n<li>Bootstrap 4</li>\n<li>CSS3</li>\n</ol>\n<p><a href="https://i.stack.imgur.com/MqvVH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MqvVH.png" alt="Enter image description here" /></a></p>\n<h3>1. Bootstrap 4.3+</h3>\n<p>For vertical alignment: <code>d-flex align-items-center</code></p>\n<p>For horizontal alignment: <code>d-flex justify-content-center</code></p>\n<p>For vertical and horizontal alignment: <code>d-flex align-items-center justify-content-center</code></p>\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>.container {\n    height: 180px;\n    width:100%;\n    background-color: blueviolet;\n}\n\n.container &gt; div {\n  background-color: white;\n  padding: 1rem;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"\nrel="stylesheet"/&gt;\n\n&lt;div class="d-flex align-items-center justify-content-center container"&gt;\n  &lt;div&gt;I am in Center&lt;/div&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<h3>2. CSS\xa03</h3>\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>.container {\n    height: 180px;\n    width:100%;\n    background-color: blueviolet;\n}\n\n.container &gt; div {\n  background-color: white;\n  padding: 1rem;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container center"&gt;\n    &lt;div&gt;I am in Center&lt;/div&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 51626821, 'author': 'Sameera Prasad Jayasinghe', 'author_id': 5901608, 'author_profile': 'https://Stackoverflow.com/users/5901608', 'pm_score': 7, 'selected': False, 'text': '<pre class="lang-css prettyprint-override"><code> .outer {\n   display: flex;\n   align-items: center; \n   justify-content: center;\n }\n</code></pre>\n'}, {'answer_id': 55066555, 'author': 'Dennis Don', 'author_id': 1367794, 'author_profile': 'https://Stackoverflow.com/users/1367794', 'pm_score': 3, 'selected': False, 'text': '<p>Using display flex, first you need to wrap the container of the item that you want to align:</p>\n<pre><code>&lt;div class=&quot;outdiv&quot;&gt;\n    &lt;div class=&quot;indiv&quot;&gt;\n        &lt;span&gt;test1&lt;/span&gt;\n        &lt;span&gt;test2&lt;/span&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Then apply the following CSS content to wrap <em>div</em> or <em>outdiv</em> in my example:</p>\n<pre class="lang-css prettyprint-override"><code>.outdiv {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n</code></pre>\n'}, {'answer_id': 57117215, 'author': 'Stephen', 'author_id': 558721, 'author_profile': 'https://Stackoverflow.com/users/558721', 'pm_score': 2, 'selected': False, 'text': '<p>My new favorite way to do it is with a CSS grid:</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>/* technique */\r\n\r\n.wrapper {\r\n  display: inline-grid;\r\n  grid-auto-flow: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n/* visual emphasis */\r\n\r\n.wrapper {\r\n  border: 1px solid red;\r\n  height: 180px;\r\n  width: 400px;\r\n}\r\n\r\nimg {\r\n  width: 100px;\r\n  height: 80px;\r\n  background: #fafafa;\r\n}\r\n\r\nimg:nth-child(2) {\r\n  height: 120px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;\r\n  &lt;img src="https://source.unsplash.com/random/100x80/?bear"&gt;\r\n  &lt;img src="https://source.unsplash.com/random/100x120/?lion"&gt;\r\n  &lt;img src="https://source.unsplash.com/random/100x80/?tiger"&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 57247568, 'author': 'akhtarvahid', 'author_id': 6544460, 'author_profile': 'https://Stackoverflow.com/users/6544460', 'pm_score': 4, 'selected': False, 'text': '<h3>Three ways to make a center child div in a parent div</h3>\n<ul>\n<li>Absolute positioning method</li>\n<li>Flexbox method</li>\n<li>Transform/translate method</li>\n</ul>\n<p><a href="https://i.stack.imgur.com/IJ41P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IJ41P.png" alt="Enter image description here" /></a></p>\n<p><a href="https://jsfiddle.net/vahid_634/Lsvcrf1g/4/" rel="nofollow noreferrer">Demo</a></p>\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>/* Absolute Positioning Method */\n.parent1 {\n  background: darkcyan;\n   width: 200px;\n   height: 200px;\n   position: relative;\n}\n.child1 {\n  background: white;\n  height: 30px;\n  width: 30px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  margin: -15px;\n}\n\n/* Flexbox Method */\n.parent2 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: darkcyan;\n  height: 200px;\n  width: 200px;\n}\n.child2 {\n  background: white;\n  height: 30px;\n  width: 30px;\n}\n\n/* Transform/Translate Method */\n.parent3 {\n  position: relative;\n  height: 200px;\n  width: 200px;\n  background: darkcyan;\n}\n.child3 {\n  background: white;\n  height: 30px;\n  width: 30px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent1"&gt;\n  &lt;div class="child1"&gt;&lt;/div&gt;\n&lt;/div&gt;\n&lt;hr /&gt;\n\n&lt;div class="parent2"&gt;\n  &lt;div class="child2"&gt;&lt;/div&gt;\n&lt;/div&gt;\n&lt;hr /&gt;\n\n&lt;div class="parent3"&gt;\n  &lt;div class="child3"&gt;&lt;/div&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 64780990, 'author': 'HASSAN MD TAREQ', 'author_id': 4802664, 'author_profile': 'https://Stackoverflow.com/users/4802664', 'pm_score': 2, 'selected': False, 'text': '<p>Using only a Bootstrap class:</p>\n<ul>\n<li>div: <code>class=&quot;container d-flex&quot;</code></li>\n<li>element inside div: <code>class=&quot;m-auto&quot;</code></li>\n</ul>\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-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous"&gt;\n\n&lt;div class="container d-flex mt-5" style="height:110px; background-color: #333;"&gt;\n  &lt;h2 class="m-auto"&gt;&lt;a href="https://hovermind.com/"&gt;H➲VER➾M⇡ND&lt;/a&gt;&lt;/h2&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/79461', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5232/']