Div 未居中反应

Question

我正在尝试将 div 居中，但父 div 似乎比应有的宽。我可以使用 margin:100px auto 将其居中。但为什么我不能用顶部和左侧来做呢？

index.js

：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.js';
import './style/index.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </BrowserRouter>
);

App.js

：

import {Route, Routes} from 'react-router-dom'
import '../style/App.css'

import LoginForm from "./LoginForm"
function App() {
  return (
    <div className="App">
        <Routes>
            <Route path = '/login' element = {<LoginForm/>} />
        </Routes>
    </div>
  );
}
export default App

LoginForm.css

：

.card {
    position: absolute;
    top:50%;
    left:50%;
    width: auto;
    background:white;
    border-radius: 50px;
}

Answer 1

既然您使用了

position: absolute

，您可以添加

transform: translate(-50%, 0);

您还可以使用网格或弹性盒之类的东西。