CODEWITHSUNDEEP
reactjs
Umut Arpat
Umut Arpat

Reputation: 566

How can i put a circle in the middle of the page

I have a css component in App.css

.circle {
    width: 100;
    height: 100;
   border-radius: 100/2;
   background-color: red;
}

what i want is to put that component in the middle of the page. How can i do that ?

import React from "react";
import "./App.css";


const App = () => {
  return (
    <div >
      <div className="circle">
      </div>

    </div>
  );
}

export default App;

Upvotes: 0

Views: 721

Answers (1)

Victor Fernandes
Victor Fernandes

Reputation: 396

React aside, you can use flexbox to center anything. You can implement the same within React. 

.circle {
  width: 100px;
  height: 100px;
  background-color: cyan;
  border-radius: 50%;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
<div class="container">
  <div class="circle"></div>
</div>

Upvotes: 1

Related Questions