{"id":354,"date":"2017-03-14T13:41:03","date_gmt":"2017-03-14T13:41:03","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=354"},"modified":"2017-03-29T17:54:43","modified_gmt":"2017-03-29T12:24:43","slug":"how-vertically-center-text-css","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/how-vertically-center-text-css\/","title":{"rendered":"[10 Solved Answer]How to vertically center text with CSS"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM<\/label><\/p>\n<p>To align the text contents of this div vertically center.<\/p>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;%23box%0A%7B%0A%20%20height%3A%2090px%3B%0A%20%20width%3A%20270px%3B%0A%20%20background%3A%20%23001%3B%0A%20%20font-size%3A%2048px%3B%0A%20%20font-style%3A%20oblique%3B%0A%20%20color%3A%20%23FFF%3B%0A%20%20text-align%3A%20center%3B%0A%20%20margin-top%3A%2021px%3B%0A%20%20margin-left%3A%205px%3B%0A%7D%0A%3Cdiv%20Id%3D%22box%22%3E%0A%20%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;css align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>This approach can only works for a single line of text<\/li>\n<\/ul>\n[pastacode lang=&#8221;markup&#8221; manual=&#8221;div%0A%7B%0A%20%20height%3A%2090px%3B%0A%20%20line-height%3A%2090px%3B%0A%0A%20%20text-align%3A%20center%3B%0A%20%20border%3A%202px%20dashed%20%23f69c55%3B%0A%7D%0A%3Cdiv%3E%0A%20%20Hello%20World!%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;css align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>solution for a single line and multiple lines of text<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;div%20%0A%7B%0A%20%20height%3A%20200px%3B%0A%20%20line-height%3A%20200px%3B%0A%20%20text-align%3A%20center%3B%0A%20%20border%3A%202px%20dashed%20%23f69c55%3B%0A%7D%0Aspan%20%0A%7B%0A%20%20display%3A%20inline-block%3B%0A%20%20vertical-align%3A%20middle%3B%0A%20%20line-height%3A%20normal%3B%0A%7D%0A%3Cdiv%3E%0A%20%20%3Cspan%3EWelcome%20to%20Wikitechy.%20%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;css align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Use the below CSS code<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;display%3A%20table-cell%3B%0Avertical-align%3A%20middle%3B%0A%20finally%20CSS%20looks%20like%3A%0A%23box%20%0A%7B%0A%20%20height%3A%2090px%3B%0A%20%20width%3A%20270px%3B%0A%20%20background%3A%20%23001%3B%0A%20%20font-size%3A%2048px%3B%0A%20%20font-style%3A%20oblique%3B%0A%20%20color%3A%20%23FFF%3B%0A%20%20text-align%3A%20center%3B%0A%20%20margin-top%3A%2020px%3B%0A%20%20margin-left%3A%205px%3B%0A%20%20display%3A%20table-cell%3B%0A%20%20vertical-align%3A%20middle%3B%0A%7D%0A%3Cdiv%20id%3D%22box%22%3E%0A%20%20Some%20text%3C%2Fdiv%3E%0A&#8221; message=&#8221;text align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>Flexible approach for vertical alignment:<\/li>\n<\/ul>\n[pastacode lang=&#8221;markup&#8221; manual=&#8221;div%20%0A%7B%0A%20%20width%3A%20250px%3B%0A%20%20min-height%3A%2050px%3B%0A%20%20line-height%3A%2050px%3B%0A%20%20text-align%3A%20center%3B%0A%20%20border%3A%201px%20solid%20%23123456%3B%0A%20%20margin-bottom%3A6px%3B%0A%7D%0Aspan%20%0A%7B%0A%20%20display%3A%20inline-block%3B%0A%20%20vertical-align%3A%20middle%3B%0A%20%20line-height%3A%20normal%3B%0A%7D%0A%3Cdiv%3E%0A%20%20%3Cspan%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3Cbr%20%2F%3E%0A%20%20%20%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3Cbr%20%2F%3E%0A%20%20%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%3E%0A%20%3Cspan%3ELorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%3E%0A%20%20%3Cspan%3ELorem%20ipsum%20dolor%20sit%20amet.%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%3E%0A&#8221; message=&#8221;text align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>For reference and simpler answer for vertically center text:<\/li>\n<li>Pure CSS:<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;vertical-align%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20top%3A%2050%25%3B%0A%20%20%20%20-webkit-transform%3A%20translateY(-50%25)%3B%0A%20%20%20%20-ms-transform%3A%20translateY(-50%25)%3B%0A%20%20%20%20transform%3A%20translateY(-50%25)%3B%0A%7D%0A&#8221; message=&#8221;text align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[pastacode lang=&#8221;css&#8221; manual=&#8221;Or%20as%20a%20SASS%2FSCSS%20Mixin%3A%0A%40mixin%20vertical-align%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20top%3A%2060%25%3B%0A%20%20%20%20-webkit-transform%3A%20translateY(-50%25)%3B%0A%20%20%20%20-ms-transform%3A%20translateY(-50%25)%3B%0A%20%20%20%20transform%3A%20translateY(-50%25)%3B%0A%7D%0A&#8221; message=&#8221;div align center&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li><strong>Use by:<\/strong><\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;.class-to-center%20%0A%7B%0A%20%20%20%20%40include%20vertical-align%3B%0A%7D%0A&#8221; message=&#8221;div align center&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>The element being placed on a \u201chalf pixel\u201d. A solution for this parent element to preserve-3d. Like following:<br \/>\n.parent-element<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;%7B%0A%20%20%20%20-webkit-transform-style%3A%20preserve-3d%3B%0A%20%20%20%20-moz-transform-style%3A%20preserve-3d%3B%0A%20%20%20%20transform-style%3A%20preserve-3d%3B%0A%7D%0A&#8221; message=&#8221;text align css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>For a single line of text<\/li>\n<li>It\u00a0can\u00a0be used when\u00a0#box has non-fixed,\u00a0relative height in %.<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;%3Cdiv%20id%3D%22box%22%3E%3C%2Fdiv%3E%0A%23box%3A%3Abefore%0A%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20height%3A%2050%25%3B%0A%7D%0A%23box%3A%3Aafter%20%0A%7B%0A%20%20%20%20vertical-align%3A%20top%3B%0A%20%20%20%20line-height%3A%200%3B%0A%20%20%20%20content%3A%20%22TextContent%22%3B%0A%7D%0A&#8221; message=&#8221;text align css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>If we need to place inner text in HTML, not in CSS, then we need to wrap text content in additional\u00a0inline\u00a0element and edit\u00a0 #box:: after to match it.<\/li>\n<\/ul>\n<p><strong>For example,<\/strong><\/p>\n[pastacode lang=&#8221;markup&#8221; manual=&#8221;%3Cdiv%20id%3D%22box%22%3E%3Cspan%3ETextContent%3C%2Fspan%3E%3C%2Fdiv%3E%0AIn%20this%20case%20%23box%3A%3Aafter%20should%20be%20replaced%20to%20%23box%20span.%0A&#8221; message=&#8221;align center css&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>A very simple &amp; most powerful solution to vertically align center:<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;.outer-div%20%0A%7B%0A%20height%3A%20100px%3B%0A%20%20width%3A%20200px%3B%0A%20%20text-align%3A%20center%3B%0A%20%20border%3A%201px%20solid%20%23000%3B%0A%7D%0A%0A.inner%20%0A%7B%0A%20%20position%3A%20relative%3B%0A%20%20top%3A%2045%25%3B%0A%20%20transform%3A%20translateY(-45%25)%3B%0A%20%20color%3A%20red%3B%0A%7D%0A%3Cdiv%20class%3D%22outer-div%22%3E%0A%20%20%3Cspan%20class%3D%22inner%22%3ENo%20data%20available%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;align center css&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>The CSS property transform is usually used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require us to either know the height of the element or only works on single-line text, etc.<\/li>\n<li>So we can write,<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;.element%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20top%3A%2050%25%3B%0A%20%20%20transform%3A%20translateY(-50%25)%3B%0A%7D%20%0A&#8221; message=&#8221;align center css&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>It is a similar technique to the absolute-position method, but with the upside that we don\u2019t have to set any height on the element or position-property on the parent<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>To achieve the effect of line-height, it only works if we have one line of text. if we had more content, the text will still be centered, but the div itself will be slightly larger.<\/li>\n<\/ul>\n[pastacode lang=&#8221;markup&#8221; manual=&#8221;div%0A%7B%0A%20%20height%3A120px%3B%0A%20%20line-height%3A%20120px%3B%0A%7D%0AAnother%20way%2C%0Adiv%20%0A%7B%0A%20%20%20padding%3A%2060px%200%3B%0A%7D%0A&#8221; message=&#8221;html align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>It set the top and bottom padding of the div to 60px, and the left and right padding to zero, making the div 120px high, and placing the text vertically centered in the div.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>For all our vertical alignment<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;%40mixin%20vertical-align(%24position%3A%20relative)%20%0A%7B%0A%20%20position%3A%20%24position%3B%0A%20%20top%3A%2060%25%3B%0A%20%20-webkit-transform%3A%20translateY(-50%25)%3B%0A%20%20-ms-transform%3A%20translateY(-50%25)%3B%0A%20%20transform%3A%20translateY(-50%25)%3B%0A%7D%0AThen%20include%0A.element%0A%7B%0A%20%20%20%20%40include%20vertical-align()%3B%0A%7D%0A&#8221; message=&#8221;html align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>vertically center style<\/li>\n<\/ul>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;%23box%0A%7B%0A%20%20display%3A%20table-cell%3B%0A%20%20vertical-align%3A%20middle%3B%0A%20%20height%3A%2090px%3B%0A%20%20width%3A%20270px%3B%0A%20%20background%3A%20%23000%3B%0A%20%20font-size%3A%2048px%3B%0A%20%20font-style%3A%20oblique%3B%0A%20%20color%3A%20%23FFF%3B%0A%20%20text-align%3A%20center%3B%0A%20%20margin-top%3A%2020px%3B%0A%20%20margin-left%3A%205px%3B%0A%7D%0A%3Cdiv%20Id%3D%22box%22%3E%0A%20%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;html align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>This article provides some of the basic informations on css vertical align , css align , text align , div align center , vertical , align center , html align , vertically center div , html align text , vertical align middle css , html text align center , css image , table align center css , vertical and horizontal , horizontal and vertical , html image center.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM To align the text contents of this div vertically center. [pastacode lang=&#8221;css&#8221; manual=&#8221;%23box%0A%7B%0A%20%20height%3A%2090px%3B%0A%20%20width%3A%20270px%3B%0A%20%20background%3A%20%23001%3B%0A%20%20font-size%3A%2048px%3B%0A%20%20font-style%3A%20oblique%3B%0A%20%20color%3A%20%23FFF%3B%0A%20%20text-align%3A%20center%3B%0A%20%20margin-top%3A%2021px%3B%0A%20%20margin-left%3A%205px%3B%0A%7D%0A%3Cdiv%20Id%3D%22box%22%3E%0A%20%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;css align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/] SOLUTION 1: This approach can only works for a single line of text [pastacode lang=&#8221;markup&#8221; manual=&#8221;div%0A%7B%0A%20%20height%3A%2090px%3B%0A%20%20line-height%3A%2090px%3B%0A%0A%20%20text-align%3A%20center%3B%0A%20%20border%3A%202px%20dashed%20%23f69c55%3B%0A%7D%0A%3Cdiv%3E%0A%20%20Hello%20World!%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;css align code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/] solution for a single line and multiple lines of text [pastacode lang=&#8221;css&#8221; manual=&#8221;div%20%0A%7B%0A%20%20height%3A%20200px%3B%0A%20%20line-height%3A%20200px%3B%0A%20%20text-align%3A%20center%3B%0A%20%20border%3A%202px%20dashed%20%23f69c55%3B%0A%7D%0Aspan%20%0A%7B%0A%20%20display%3A%20inline-block%3B%0A%20%20vertical-align%3A%20middle%3B%0A%20%20line-height%3A%20normal%3B%0A%7D%0A%3Cdiv%3E%0A%20%20%3Cspan%3EWelcome%20to%20Wikitechy.%20%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A&#8221; message=&#8221;css align [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[1401,40,710,1398,1407,1397,728,729,713,709,1399,520,1410,722,714,723,717,1402,1404,1411,1406,1408,513,718,1400,712,727,1405,725,726,724,716,1409,715,719,721,1403,711,720],"class_list":["post-354","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-align-center","tag-center-text-in-div","tag-centering-in-css","tag-css-align","tag-css-image","tag-css-vertical-align","tag-css-vertical-align-div","tag-css-vertical-align-middle","tag-css-vertical-center","tag-css-vertical-align-property","tag-div-align-center","tag-horizontal-align-css","tag-horizontal-and-vertical","tag-how-to-align-to-middle-by-height","tag-how-to-center-in-css","tag-how-to-vertically-align-an-image-inside-div","tag-how-to-vertically-center-a-div-for-all-browsers","tag-html-align","tag-html-align-text","tag-html-image-center","tag-html-text-align-center","tag-table-align-center-css","tag-text-align","tag-true-center-vertical-and-horizontal-css-div","tag-vertical","tag-vertical-align-anything-with-just-3-lines-of-css","tag-vertical-align-div-inside-div","tag-vertical-align-middle-css","tag-vertical-align-middle-div","tag-vertical-align-middle-not-working","tag-vertical-align-text-in-div","tag-vertical-alignment-of-elements-in-a-div","tag-vertical-and-horizontal","tag-vertical-align","tag-vertical-align-with-inline-elements","tag-vertically-align-text-in-element-with-css","tag-vertically-center-div","tag-vertically-center-multi-lined-text","tag-vertically-center-text-in-an-absolutely-centered-sphere"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}