{"id":6372,"date":"2025-01-02T07:44:44","date_gmt":"2025-01-02T07:44:44","guid":{"rendered":"https:\/\/ubiq.co\/tech-blog\/?p=6372"},"modified":"2025-01-02T08:38:00","modified_gmt":"2025-01-02T08:38:00","slug":"how-to-vertically-center-text-in-css","status":"publish","type":"post","link":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/","title":{"rendered":"How to Vertically Center Text in CSS"},"content":{"rendered":"\n<p>Often web developers need to vertically align text on their websites. This is especially required to improve legibility and aesthetics. It can be done using CSS as well as JavaScript. In this article, we will learn different ways to vertically center text in CSS.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#How_to_Vertically_Center_Text_in_CSS\" >How to Vertically Center Text in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#1_Basic_Solution\" >1. Basic Solution<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#2_Using_Span\" >2. Using Span<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#3_Using_table_display\" >3. Using table display<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#4_Using_Flexbox\" >4. Using Flexbox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#5_Using_Auto_Margin\" >5. Using Auto Margin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#6_Using_flex-direction\" >6. Using flex-direction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Vertically_Center_Text_in_CSS\"><\/span>How to Vertically Center Text in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let us look at the different ways to vertically center the text inside the div element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Basic_Solution\"><\/span>1. Basic Solution<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let us say you have the following div element with some text.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div&gt;<br>  test text<br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>In this approach, we use a fixed height div and set its line height equal to the height of the div. This is what vertically aligns the inner text. We also set text-align attribute to center, to horizontally center it. This does not affect vertical alignment. Here is the CSS for it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div {<br>  height: 100px;<br>  line-height: 100px;<br>  text-align: center;<br>  border: 1px solid black;<br>}<\/pre>\n\n\n\n<p>Please note, this solution will work for a single line of text since we have set line height of div equal to its fixed-height.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Using_Span\"><\/span>2. Using Span<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This solution will also work with multiple lines of text. Let us say your text is wrapped in span tag, which in turn is inside a div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div&gt;<br>  &lt;span&gt;hello world&lt;\/span&gt;<br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>In this case, we format our div as we did before, by setting its line height equal to its fixed height.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div {<br>  height: 100px;<br>  line-height: 100px;<br>  text-align: center;<br>  border: 1px solid black;<br>}<\/pre>\n\n\n\n<p>Then we format the inner span by setting its display to be inline-block. We set vertical-align attribute to middle to vertically align text. Lastly, we set the line-height to normal.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">span {<br>  display: inline-block;<br>  vertical-align: middle;<br>  line-height: normal;<br>}<\/pre>\n\n\n\n<p>The div will center align the span inside it using the line-height property. It also makes the span inline-block with vertical-align:middle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Using_table_display\"><\/span>3. Using table display<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>HTML tables also support vertical alignment. By configuring your div to be like a table cell, you can vertically align its contents. Here is the HTML, same as previous case.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div&gt;<br>  &lt;span&gt;hello world&lt;\/span&gt;<br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>Here is its CSS. We set the div&#8217;s display to be table, with width to be 100%. You can change the width as per your requirement. The important CSS here is display:table that allows you to display div as tables. So its content becomes that of table cells. In our case, the span works like a table cell. So we set its display to table-cell. We also set its vertical-align property to middle to vertically align text in the span.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div {<br>  display: table;<br>  height: 100px;<br>  width: 100%;<br>  text-align: center;<br>  border: 1px solid black;<br>}<br>span {<br>  display: table-cell;<br>  vertical-align: middle;<br>}<\/pre>\n\n\n\n<p> It is just like vertically aligning a text in a table cell. In this case, the div is like a table with one cell, and the span inside the div is that one cell. Rest is similar to table formatting.<\/p>\n\n\n\n<p>However, older web browsers like Internet Explorer may not support this approach.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Using_Flexbox\"><\/span>4. Using Flexbox<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can also use the new <a href=\"https:\/\/www.w3schools.com\/css\/css3_flexbox.asp\" target=\"_blank\" rel=\"noreferrer noopener\">flexbox<\/a> formatting available in CSS. Flexbox allows you to layout the elements in a flexible manner. Here again we use the same HTML, text within a span within a div.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;div&gt;<br>  &lt;span&gt;hello world&lt;\/span&gt;<br>&lt;\/div&gt;<\/pre>\n\n\n\n<p>In this case, we just need to set the display to flex and align-items to center. We do not need to format the span to vertically align text. The property justify-content is used to center align the text horizontally and align-items property vertically aligns the div content..<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div {<br>  display: flex;<br>  justify-content: center;<br>  align-items: center;<br>  height: 100px;<br>  width: 100%;<br>  border: 1px solid black;<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Using_Auto_Margin\"><\/span>5. Using Auto Margin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In the above approach, we center the text content via its div container. But if your flex container contains only one item, as in the case of a span in a div, you can also set margin to auto to vertically and horizontally align it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div {<br>  display: flex;<br><br>  justify-content: center;<br>  height: 100px;<br>  width: 100%;<br>  border: 1px solid black;<br>}<br>span{<br>  margin: auto;<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Using_flex-direction\"><\/span>6. Using flex-direction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>By default, when you set the display as flex, then its contents are laid as rows. flex-direction property determines this action and its default value is row. However, if you want to lay out the contents vertically, then you need to set flex-direction to column, on the container element. Additionally, you need to set align-items and justify-content to center. However, in this case, justify-content vertically aligns content whereas align-items horizontally aligns items. In our previous examples, they work the other way around.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">div {<br>  display: flex;<br>  justify-content: center;<br>  align-items: center;  <br>  flex-direction: column;<br>  height: 100px;<br>  width: 100%;<br>  border: 1px solid black;<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this article, we have learnt several different ways to vertically center text in CSS. You can use any of these methods depending on your requirement.<\/p>\n\n\n\n<p>Also read:<\/p>\n\n\n\n<p><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-move-element-into-other-element-in-jquery\/\">How to Move Element Into Other Element in jQuery<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-store-objects-in-html5-local-storage-session-storage\/\">How to Store Objects in HTML5 Local Storage\/Session Storage<\/a><br><a href=\"https:\/\/ubiq.co\/tech-blog\/how-to-remove-duplicate-values-from-js-array\/\">How to Remove Duplicate Values from JS Array<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes  you may need to vertically center text inside a div or on web pages. Here are different ways to vertically center text in CSS.<\/p>\n","protected":false},"author":1,"featured_media":6405,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[340,346],"tags":[369,368],"class_list":["post-6372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","tag-text-align","tag-vertically-center"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Vertically Center Text in CSS - Ubiq BI<\/title>\n<meta name=\"description\" content=\"Sometimes you may need to vertically center text inside a div or on web pages. Here are different ways to vertically center text in CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Vertically Center Text in CSS - Ubiq BI\" \/>\n<meta property=\"og:description\" content=\"Sometimes you may need to vertically center text inside a div or on web pages. Here are different ways to vertically center text in CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ubiq BI\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ubiqbi\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-02T07:44:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-02T08:38:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/vertically-align-text-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sreeram Sreenivasan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:site\" content=\"@UbiqBI\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sreeram Sreenivasan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/\"},\"author\":{\"name\":\"Sreeram Sreenivasan\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"headline\":\"How to Vertically Center Text in CSS\",\"datePublished\":\"2025-01-02T07:44:44+00:00\",\"dateModified\":\"2025-01-02T08:38:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/\"},\"wordCount\":704,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1\",\"keywords\":[\"text align\",\"vertically center\"],\"articleSection\":[\"CSS\",\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/\",\"name\":\"How to Vertically Center Text in CSS - Ubiq BI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1\",\"datePublished\":\"2025-01-02T07:44:44+00:00\",\"dateModified\":\"2025-01-02T08:38:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\"},\"description\":\"Sometimes you may need to vertically center text inside a div or on web pages. Here are different ways to vertically center text in CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/ubiq.co\\\/tech-blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1\",\"width\":300,\"height\":200,\"caption\":\"vertically align text in css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/how-to-vertically-center-text-in-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Vertically Center Text in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#website\",\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/\",\"name\":\"Ubiq BI\",\"description\":\"Build dashboards &amp; reports in minutes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/#\\\/schema\\\/person\\\/db98d49a766a3a111d8510935ab90abc\",\"name\":\"Sreeram Sreenivasan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g\",\"caption\":\"Sreeram Sreenivasan\"},\"description\":\"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sreeram-sreenivasan\\\/\"],\"url\":\"https:\\\/\\\/ubiq.co\\\/tech-blog\\\/author\\\/wordpress\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Vertically Center Text in CSS - Ubiq BI","description":"Sometimes you may need to vertically center text inside a div or on web pages. Here are different ways to vertically center text in CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/","og_locale":"en_US","og_type":"article","og_title":"How to Vertically Center Text in CSS - Ubiq BI","og_description":"Sometimes you may need to vertically center text inside a div or on web pages. Here are different ways to vertically center text in CSS.","og_url":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/","og_site_name":"Ubiq BI","article_publisher":"https:\/\/www.facebook.com\/ubiqbi","article_published_time":"2025-01-02T07:44:44+00:00","article_modified_time":"2025-01-02T08:38:00+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/vertically-align-text-css.jpg","type":"image\/jpeg"}],"author":"Sreeram Sreenivasan","twitter_card":"summary_large_image","twitter_creator":"@UbiqBI","twitter_site":"@UbiqBI","twitter_misc":{"Written by":"Sreeram Sreenivasan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#article","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/"},"author":{"name":"Sreeram Sreenivasan","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"headline":"How to Vertically Center Text in CSS","datePublished":"2025-01-02T07:44:44+00:00","dateModified":"2025-01-02T08:38:00+00:00","mainEntityOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/"},"wordCount":704,"commentCount":0,"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1","keywords":["text align","vertically center"],"articleSection":["CSS","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/","url":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/","name":"How to Vertically Center Text in CSS - Ubiq BI","isPartOf":{"@id":"https:\/\/ubiq.co\/tech-blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#primaryimage"},"image":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1","datePublished":"2025-01-02T07:44:44+00:00","dateModified":"2025-01-02T08:38:00+00:00","author":{"@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc"},"description":"Sometimes you may need to vertically center text inside a div or on web pages. Here are different ways to vertically center text in CSS.","breadcrumb":{"@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#primaryimage","url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1","contentUrl":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1","width":300,"height":200,"caption":"vertically align text in css"},{"@type":"BreadcrumbList","@id":"https:\/\/ubiq.co\/tech-blog\/how-to-vertically-center-text-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ubiq.co\/tech-blog\/"},{"@type":"ListItem","position":2,"name":"How to Vertically Center Text in CSS"}]},{"@type":"WebSite","@id":"https:\/\/ubiq.co\/tech-blog\/#website","url":"https:\/\/ubiq.co\/tech-blog\/","name":"Ubiq BI","description":"Build dashboards &amp; reports in minutes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ubiq.co\/tech-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/ubiq.co\/tech-blog\/#\/schema\/person\/db98d49a766a3a111d8510935ab90abc","name":"Sreeram Sreenivasan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4b3127ed2d4bb8efb3fa0bbb52cf2efd4d0156c97fc05a503537c883e8279947?s=96&d=mm&r=g","caption":"Sreeram Sreenivasan"},"description":"Sreeram Sreenivasan is the Founder of Ubiq. He has helped many Fortune 500 companies in the areas of BI &amp; software development.","sameAs":["https:\/\/www.linkedin.com\/in\/sreeram-sreenivasan\/"],"url":"https:\/\/ubiq.co\/tech-blog\/author\/wordpress\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/ubiq.co\/tech-blog\/wp-content\/uploads\/2025\/01\/vertically-align-text-css.jpg?fit=300%2C200&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pbGGTT-1EM","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/comments?post=6372"}],"version-history":[{"count":35,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6372\/revisions"}],"predecessor-version":[{"id":6408,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/posts\/6372\/revisions\/6408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media\/6405"}],"wp:attachment":[{"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/media?parent=6372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/categories?post=6372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubiq.co\/tech-blog\/wp-json\/wp\/v2\/tags?post=6372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}