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

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

This tutorial will get you something like this:
image

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!
image
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?

Simple!
(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!
    ENJOY!
Voters
Profile icon
JosefineYtterga
Profile icon
Tanisha2021
Profile icon
littlepenguin
Profile icon
wjnb
Profile icon
Whacko
Comments
hotnewtop
Profile icon
Wumi4

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

Profile icon
Whacko

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