如何在页面中间放置一个圆圈

Question

我在App.css中有一个CSS组件

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

我想要的是将该组件放在页面中间。我该怎么办？

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


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

    </div>
  );
}

export default App;