How can I center text (horizontally and vertically) inside a div block?

HTML Web Development Front End Technology

We can easily center text inside a div both horizontally and vertically. Let us see them one by one.

Center Text in Div Horizontally using the text-align property

To center text in div horizontally, use the text-align property. The text-align property determines the way in which line boxes are aligned within a block-level element. Here are the possible values −

left − The left edge of each line box is aligned with the left edge of the block-level element's content area.
right − The right edge of each line box is aligned with the right edge of the block-level element's content area.
center − The center of each line box is aligned with the center of the block-level element's content area.
justify − The edges of each line box should align with the edges of the block-level element's content area.
string − The content of cells in a column will align on the given string.

Example

Let us now center text in div horizontally using the text-align property −


<!DOCTYPE html>
<html>
<head>
   <title>Align Horizontally</title>
   <meta name="viewport" content="width=device-width,
   initial-scale=1.0">
   <style>
      .demo {
         background-color: orange;
         border: 3px solid yellow;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1>Software Quality Management</h1>
   <p>Software Quality Management ensures the required level of software quality is achieved.
   </p>
   <div class="demo">
      <p>This text in div is centered horizontally.</p>
   </div>
</body>
</html>

Center Text in Div Horizontally using the justify-content property

Example

To center text in div horizontally, use the justify-content property. Let us now see an example


<!DOCTYPE html>
<html>
<head>
   <title>Align Horizontally</title>
   <meta name="viewport" content="width=device-width,
   initial-scale=1.0">
   <style>
      .demo {
         background-color: orange;
         border: 3px solid yellow;
         display: flex;
         justify-content: center;
      }
   </style>
</head>
<body>
   <h1>Software Quality Management</h1>
   <p>Software Quality Management ensures the required level of software quality is achieved.
   </p>
   <div class="demo">
      <p>This text in div is centered horizontally.</p>
   </div>
</body>
</html>

Center Text in Div Vertically using the padding property

To center text in div vertically, use the padding property. The padding property allows you to specify how much space should appear between the content of an element and its border. The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −

The padding-bottom specifies the bottom padding of an element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.

Example

Let us now see an example to center text in div vertically using the padding property −


<!DOCTYPE html>
<html>
<head>
   <title>Align Vertically</title>
   <meta name="viewport" content="width=device-width,
   initial-scale=1.0">
   <style>
      .demo {
         background-color: orange;
         border: 3px solid yellow;
         padding: 50px 0;
      }
   </style>
</head>
<body>
   <h1>Software Quality Management</h1>
   <p>Software Quality Management ensures the required level of software quality is achieved.
   </p>
   <div class="demo">
      <p>This text in div is centered vertically.</p>
   </div>
</body>
</html>

Center Text in Div Vertically using the line-height property

To center text in div vertically, use the line-height property. The line-height property modifies the height of the inline boxes which make up a line of text.

Here are the possible values −

normal − Directs the browser to set the height of lines in the element to a "reasonable" distance.
number − The actual height of lines in the element is this value multiplied by the font-size of the element.
length − The height of lines in the element is the value given.
percentage − The height of lines in the element is calculated as a percentage of the element's font-size.

Example

Let us now see an example to center text in div vertically using the line-height property −


<!DOCTYPE html>
<html>
<head>
   <title>Align Vertically</title>
   <meta name="viewport" content="width=device-width,
   initial-scale=1.0">
   <style>
      .demo {
         background-color: orange;
         border: 3px solid yellow;
         line-height: 150px;
         height: 200px;
      }
   </style>
</head>
<body>
   <h1>Software Quality Management</h1>
   <p>Software Quality Management is a process that ensures the required level of software
   quality is achieved.</p>
   <div class="demo">
      <p> This text in div is centered vertically.</p>
   </div>
</body>
</html>