Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by mohamedahmedgehad
mohamedahmedgehad
11,541 Points

Make an element covers the browser's full page

How can I make an element that occupies the entire browser page with the text centered vertically and horizontally

3 Answers

Phil Wood
Phil Wood
4,379 Points

Hello Mohamed, I suggest you use the CSS property Flex.

Firstly, you should apply 100% height to your html, body and element.

html, body, .element {
 height: 100%;
}

Then apply Flex properties to your element.

.element {
  display: flex;
  justify-content: center;
  align-items: center;
}

Your html should look like this :

<!DOCTYPE html>
<html>
<head>
    <title>Centered Text</title>
        <style>
                /* You can put your css here if you like */
        </style>
</head>
<body>
        <div class="element">
                <p>I'm in the centre!</p>
        </div>
</body>
</html>

I would recommend looking up the correct prefixes for the flex property to make sure your work is cross browser compatible. shouldiprefix.com

Happy coding

mohamedahmedgehad
mohamedahmedgehad
11,541 Points

Thank you, will try

Phil Wood
Phil Wood
4,379 Points

No problem at all Mohamed, let me know if this works. Remember to select a best answer to let others know this issue is resolved.

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

Any block-mode element (such as "div") takes up all horizontal space by default, and expanding the element vertically is easily done with screen-relative units. But most browsers place margins on the body by default so you need to remove those explicitly. It's also simple to center text horizontally (with "text-align"), but to center text vertically within an element is a bit tricky. One way might be to and add padding calculated to be half the window height minus the size of text itself:

body { margin: 0; }
#element {
  height: 100vh;
  text-align: center;
  padding-top: calc(50vh - 3em);
}

Note that this relies on the text only requiring one line. If there is enough text to occupy more than one line, the "em" value would need to be changed. Even worse, the number of lines required might vary with the window width and make predicting it accurately a problem.

So even though it's not exactly what you asked for because it centers another element (the paragraph) within the large element, Phil's suggestion of using flexbox is a more practical approach to achieving the visual effect.

mohamedahmedgehad
mohamedahmedgehad
11,541 Points
mohamedahmedgehad
mohamedahmedgehad
11,541 Points

I found a good answer here: https://www.freecodecamp.org/news/how-to-center-things-with-style-in-css-dc87b7542689/

Steven Parker
Steven Parker
231,264 Points
Steven Parker
Steven Parker
231,264 Points

Like the flexbox approach, this one also involves centering an element instead of text within an element. So it's not what you asked for, but it's also a good practical way to get the visual result.