时间戳

首页 > 解决方案 > 如何在页面中间放一个圆圈

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

问题描述

我在 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;

标签： reactjs

解决方案

抛开反应，你可以使用 flexbox 来居中任何东西。你可以在 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>

推荐阅读