Skip to content
← Back to Community
How To Position Text in the Center of the Screen
Profile icon

How To Position Text in the Center of the Screen Using HTML

This tutorial will get you something like this:

So, this script is not perfect, but it's fine for some things.

OK, so this tutorial uses HTML and CSS, so you're gonna need to make a new HTML, CSS, JS repl. You can delete the script.js file, because no JavaScript is needed.

Let's make the text we want centered, like this:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Centered Text!</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="center">Center!</p> </body> </html>

We use class so that way we know that it is that text we want centered, nothing else.

Now, in our style.css:

body { margin: 0; }

margin: 0 will make sure the text is right at the edge, not any further into the page, because this can mess up our code.
First, let's make sure the x position is aligned (x position is sideways).

.center { text-align: center; }

Nice! We got ourselves some aligned x position!
Now, let's align our y position (Guess)!

.center { text-align: center; font-size: 85%; padding-top: 20%; }

Awesome! We got ourselves some alignment! Not the most aligned, but good enough.

How do I change the size of my text, without ruining the alignment?

(Actually, it's a little hard)

  1. Change the size by the amount you want to change it by.
  2. Change the padding-top by NEGATIVE the amount you changed the size by.
    PRO TIP: If you want the text smaller, do the opposite of the text.
    Still confused? Go put that in the comments, and I'll be happy to respond!
Profile icon
Profile icon
Profile icon
Profile icon
Profile icon
Profile icon

Pro tip: You can use the <center> tag to center the text automatically.

Profile icon

@DangHoang2 Yes, but not many browsers support the <center> tag, so it is better to use the CSS text-align tag.