div not centering well REACT-CodePudding

I'm trying to center a div but it seems the perent div is wider than it should be. I could center it with using margin:100px auto. But why i can't do it with top and left?

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;
}

CodePudding user response：

Since you used position: absolute you can add transform: translate(-50%, 0);

And you can also use something like grids or flexboxes.