Frontend Hire
Frontend
Back to frontend track
Deprecated

Overview

CSS: Can you center a div?

"Centering a div" this phrase might sound simple, but it's a longstanding joke in the CSS community due to the surprising complexity it can involve.

OverviewSolution

Practice

Code as you read.

Use the live workspace to test the prompt.

CSS practice workspace

Best in a separate tab.

Open StackBlitz

Question

This is a classic joke in the CSS community.

"Centering a div" - this phrase might sound simple, but it's a longstanding joke in the CSS community due to the surprising complexity it can involve. Your task is to center the div both horizontally and vertically using CSS.

<div>Center Me</div>

Instructions

  • Write your CSS in the styles.css file to center the div element horizontally and vertically on the page.
  • Your solution should use classic CSS. However, if you prefer, you can opt for TailwindCSS.

Enabling TailwindCSS (Optional)

If you choose to use TailwindCSS, include this script in the head of your index.html file:

<script src="https://cdn.tailwindcss.com"></script>

Notes

  • Consider the different ways to achieve centering in CSS, and feel free to showcase a method that best represents your understanding of CSS.

Resources to Refer