How to Center a Div in CSS / HTML 👆 Grid , Flex and Margin Methods

Create index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parent1">
      <div class="child1"></div>  
    </div>
   <div class="parent2">
      <div class="child2"></div>  
    </div>
   <div class="parent3">
      <div class="child3"></div>  
    </div>
</body>
</html>

create index.css

.parent1{
  border: 1px solid red;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child1{
  width: 50px;
  height: 50px;
  background: red;
}

.parent2{
  border: 1px solid green;
  height: 100px;
  display: grid;
  place-items: center;
}
.child2{
  width: 50px;
  height: 50px;
  background: green;
}

.parent3{
  border: 1px solid blue;
  height: 100px;
}
.child3{
  margin: 25px auto;
  width: 50px;
  height: 50px;
  background: blue;
}

Comments

Shopping Cart React.js Project with Explanation✅ [ Simple Ecommerce Website using Reactjs ]

Hello guys in this video we will discuss shopping cart web app. first we need to install the basic react app using - npx create-react-app app-name The folder structure should be containing three files in components folder as below : In App.js : import './App.css' ; import Header from './components/Header' ; import ProductList from './components/ProductList' ; import CartList from './components/CartList' ; import { useState } from 'react' ; function App () { const [ product , setProduct ] = useState ([ { url : 'https://rukminim1.flixcart.com/image/300/300/l51d30w0/shoe/z/w/c/10-mrj1914-10-aadi-white-black-red-original-imagft9k9hydnfjp.jpeg?q=70' , name : 'TRQ White Shoes' , category : 'Shoes' , seller : 'AMZ Seller Ghz' , price : 1999 }, { url : 'https://5.imimg.com/data5/KC/PC...

Create A Date Range Picker in React JS (By Saifi Code)

To Create A Date Range Picker in React JS , need to install following packages : npm i antd npm i moment Step 1 : import DatePicker from antd and get RangePicker from this package Step 2 : In the JSX Use the package , you will start get picker ui Example : To get the values use onChange method and save values in state Try to console the state to check if the values are updating App.js File : import 'antd/dist/antd.css' ; import { DatePicker } from 'antd' ; import { useState } from 'react' ; import moment from 'moment' ; const { RangePicker } = DatePicker ; function App () { const [ dates , setDates ] = useState ([]) console . log ( dates ) return ( < div style = { { margin : 20 } } > < RangePicker onChange = { ( values ) => { setDates ( values . map ( item => { ...

MERN Authentication - Login, Register, Verification Email, Forget Password, User Name & Logout on Navbar

In The React Side : The folder structure will be : Lets start from App.js On this file we will be adding routing , install the package react-router-dom : import './App.css' ; import React from 'react' ; import { BrowserRouter as Router , Routes , Route , Link } from "react-router-dom" ; import Signup from './components/Signup' ; import Signin from './components/Signin' ; import Home from './components/Home' ; import ForgetPassword from './components/ForgetPassword' ; import NewSubmit from './components/NewSubmit' ; function App () { return ( < div > < Router > < Routes > < Route path = "/signup" element = { < Signup /> } /> < Route path = "/signin" element = { < Signin /> } /> < Route path = "/" e...

Saifi Code

Search This Blog