{"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=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dcss align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dmarkup\u201d manual=\u201ddiv%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\u201d message=\u201dcss align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>solution for a single line and multiple lines of text<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv%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\u201d message=\u201dcss align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201ddisplay%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\u201d message=\u201dtext align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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=\u201dmarkup\u201d manual=\u201ddiv%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\u201d message=\u201dtext align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201dvertical-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\u201d message=\u201dtext align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[pastacode lang=\u201dcss\u201d manual=\u201dOr%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\u201d message=\u201ddiv align center\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<ul>\n<li><strong>Use by:<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.class-to-center%20%0A%7B%0A%20%20%20%20%40include%20vertical-align%3B%0A%7D%0A\u201d message=\u201ddiv align center\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dtext align css code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dtext align css code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dalign center css\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>A very simple & most powerful solution to vertically align center:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d.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\u201d message=\u201dalign center css\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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=\u201dcss\u201d manual=\u201d.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\u201d message=\u201dalign center css\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dmarkup\u201d manual=\u201ddiv%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\u201d message=\u201dhtml align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dhtml align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>vertically center style<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dhtml align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dcss align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] SOLUTION 1: This approach can only works for a single line of text [pastacode lang=\u201dmarkup\u201d manual=\u201ddiv%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\u201d message=\u201dcss align code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] solution for a single line and multiple lines of text [pastacode lang=\u201dcss\u201d manual=\u201ddiv%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\u201d message=\u201dcss 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}]}}