Centered text

CSS

Easy

Objective

Center a line of text horizontally and vertically

Requirements

Create a div with a height and width of 500px
Add a line of content, then center it horizontally and vertically
The context should still be centered if the div is resized (e.g. to 300px)

Evaluation Criteria

If I gave you this test, here's what I'd be looking for:

There are a few ways this can be done, but really I'm looking for flexbox here

Click to reveal

Solution

Here's how I would approach this, but keep in mind there might be other ways to solve this problem.

/*
<div>
  lorem ipsum dolor sit amet
</div>
*/

div {
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
}

Click to reveal