Skip to content

Latest commit

 

History

History
32 lines (24 loc) · 612 Bytes

File metadata and controls

32 lines (24 loc) · 612 Bytes

Centered Red Circle

This project demonstrates how to create a perfectly centered red circle using HTML and CSS with Flexbox.

Features

  • A red circle with a border
  • Centered both vertically and horizontally using Flexbox
  • Responsive to viewport height

How to Use

  1. Open index.html in any modern web browser.
  2. You will see a red circle centered on the page.

Code Snippet

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  border: 2px solid red;
}