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

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
Rosalie7

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

Profile icon
Elio34

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
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.