CSS: Center Text inside a Div with Flexbox

Updated: August 16, 2021 By: Guest Contributor Post a comment

There are several ways to center text inside a div element, but CSS Flexbox may be the most convenient approach. What you need to do is to style the div element like this:

display: flex;
justify-content: center;
align-items: center;

Complte Example

Screenshot:

The code:

<!-- index.html -->
<html lang="en">
  <head>
    <title>Kindacode.com</title>
    <style>
      .container {
        width: 800px;
        height: 400px;
        margin: 30px auto;
        background: orangered;
        color: white;
        font-size: 40px;

        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div class="container">KindaCode.com</div>
  </body>
</html>

If you’d like to learn more about modern CSS, take a look at the following posts:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles