Skip to content
Sign upLog in
← 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

do I have to put my text in CSS? I have the test align, but my html isn't centered when I run it

Profile icon

Ramagya School is one of the best educational institutions in India currently. I was working for company when I got to know about their work. I was extremely impressed.

Profile icon

HTML is quite easy to use once you figure it out. I know nothing about it so I only buy assignment whenever I have to do html work. It helps me to get good grades.

Profile icon

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

Profile icon

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