With a name as big as React, it’s bound to cause some Stream-Crossing Confusion, as I like to call it. How do you center a <div> in React? Dave Ceddia:
React cares exactly zero about styling. Think of it as generating the barebones HTML. React will put elements on the page, but everything after that is the job of CSS: how they appear, what they look like, how they’re positioned, and how centered or uncentered they are.
“How to center a div in React” is… not a React problem. It’s a CSS problem. You don’t need “react” in your Google query. Once you figure it out, use React to apply the right CSS class name to your components
How do you center a <div> in WordPress? How do you center a <div> in Vue? On one hand, they are broken questions. Those technologies don’t have anything to do with centering things. Centering on the web is something CSS does. On the other hand, higher-level tech is sometimes involved. Maybe there is some Gutenberg thing in WordPress that handles centering on this particular site that you should use for editorial consistency. Maybe there is some styling library being used which means you can’t write regular CSS — you have to write the way the library wants you to write it. Complicated, all this “making websites” stuff.
I think questions like “how to center something with React” offen comes from all the co-mingling and myriad of approaches to adding CSS inside React components. Reading tutorials it often seems as is CSS must be added in JS inside the component, maybe even at inline level. Helping people understand that CSS still works as CSS always has when using React, and that CSS-in-JS is one highly opinionated option of many when working with React will go a long way to unraveling this confusion. In my opinion.
There are options to style React app.
Option 1:
If you create a React application with the npm package “create-react app”, then there are “app.css”, “index.css” as style template, in which the rendered component is centered by default.
Option 2:
React in JSX script is embedded in a html page. You can include “Bootstrap.css” link inside the html page header.
Option 3:
Install Material-UI for your React App. It performs as good as Bootstrap.