How To Align Text Horizontally Vertically in React

Task 1: To Align the display Text in the Center, both Horizontally and Vertically.

As we can see that This is Easy exercise based On HTML and CSS, To start making changes in Text or Display part, we go to the App.js file inside 'src' folder, and use a div and write the text that we wanted to display.

App.js

import "./App.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello React</h1>
      <h2>Hello World!</h2>
    </div>
  );
}

we will create one file App.css as our external stylesheet to center and design the text, it is important to import the 'App.css' file in App.js, it is in the same directory so we will write import "./App.css".

to change the whole page background color, we will target the body property. to center the text we will use the following reference. w3schools.com/css/css_align.asp

for horizontal div alignment: margin: auto for horizontal text alignment: text-align: center if display is in flex, then Horizontal and vertical Alignment can be done flex:1 align-items: center; justify-content: center

App.css

.body{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: yellow;
  padding: 140px;
  border: 3px solid blue;
}

follow me on Linkedin: Swapnil Gupta twitter: Swapnil