How to Vertically Center Text with CSS? Last Updated : 11 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically center the text. HTML <!DOCTYPE html> <html lang="en"> <head> <style> .container { display: flex; align-items: center; /* Vertically centers content */ height: 200px; border: 1px solid #000; } </style> </head> <body> <div class="container"> <p>Centered Text</p> </div> </body> </html> Outputvertically-centered-text2. Using line-height and vertical-align PropertyThe line-height and vertical-align properties centers the text by setting the line-height equal to the container's height. This technique aligns text vertically center within the container. HTML <!DOCTYPE html> <html> <head> <style> div { display: inline-block; vertical-align: middle; border: 2px solid black; height: 200px; line-height: 200px; width: 90%; } </style> </head> <body> <div> Centered Text </div> </body> </html> Outputvertically-centered-text3. Using CSS GridTo vertically align a text using the CSS Grid by setting display: grid; align-items: center, ensuring perfect centering regardless of screen size. HTML <!DOCTYPE html> <html lang="en"> <head> <style> .container { display: grid; align-items: center; /* Vertically centers content */ height: 200px; border: 1px solid #000; } </style> </head> <body> <div class="container"> <p>Centered Text</p> </div> </body> </html> Outputvertically-centered-text Comment More infoAdvertise with us Next Article Remove border from IFrame using CSS S shefali163 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads Wildcard Selectors (*, ^ and $) in CSS for classes Wildcard selectors can be used with attribute selectors. The asterisk (*) matches any character, the caret (^) matches the start, and the dollar sign ($) matches the end of an attribute value. For example, .class* selects all elements with a class attribute containing "class" anywhere, .class^ selec 3 min read How to style a dropdown using CSS? We will learn how to style the dropdown list using CSS and explore its implementation through examples. Dropdown menus are commonly used to allow users to select an option from a predefined list. Styling them properly can enhance your website's user experience and visual appeal.What is a <select 3 min read Remove border from IFrame using CSS The <iframe> tag is used to embed another web page within a webpage. To remove the border from an <iframe>, you can use the frameBorder attribute in the <iframe> tag, setting its value to "0".Syntax:<iframe frameBorder="value"></iframe>Note:The frameBorder attribute is 2 min read How to Hide Scrollbar with CSS Hiding the scrollbar with CSS can enhance the look of your webpage by removing visible scrollbars while still allowing users to scroll through content. This can create a cleaner, more streamlined user interface without sacrificing usability. In this article, we’ll explore different methods for hidin 3 min read How to apply !important in CSS? The !important rule in CSS is used to add more importance to a property/value than normal. It forces a style to override any other declarations, ensuring the specified property value is applied, regardless of specificity. It helps resolve conflicts but should be used sparingly to avoid complicating 2 min read How to use a not:first-child Selector in CSS? The :not(:first-child) selector in CSS targets all elements that are not the first child within their parent. It allows you to style elements except the first one, making it useful for applying styles to subsequent items in a list or layout.Syntax:not( element ) { // CSS property } Example: In this 2 min read How to Auto-Resize an Image to Fit a Div Container? To resize an image or video to fit inside a div container, use the object-fit property for precise control over how the content fits.object-fit maintains the aspect ratio or stretches the content to fill the container.Common values include cover (fills the container, may crop) and contain (fits with 3 min read How to Disable Resizable Property of Textarea using CSS? The resize property is used to disable the resizeable property of Textarea using CSS, by setting the resize property to none.Note: The resize property in CSS controls whether an element, like a textarea, can be resized by the user.Disable Resizing of TextareaThe resize property in CSS controls an el 1 min read Create an Unordered List Without Bullets using CSS To create an unordered list without bullet points, the CSS list-style-type property is used. This removes the default bullet points from the list items, and making the list appear plain.Table of ContentUsing list-style-type property Remove margin and padding after removing bullet pointsUnordered Lis 1 min read Set cellpadding and cellspacing in CSS Cell Padding The cell padding is used to define the spaces between the cells and its border. If cell padding property is not applied then it will be set as the default value. Example: html <!DOCTYPE html> <html> <head> <title>cell padding</title> <style> table, th 1 min read Like