DEV Community: Tejaswan Kalluri

Ways To Center a div

Tejaswan Kalluri — Mon, 06 Feb 2023 11:29:36 +0000

Centering a div in CSS is the confusing part for beginners. Today in this article let's see the ways to center a div.

Types

Center Horizontal

Relative and absolute
Flex Box
Margin auto

Center Vertical

Through Relative and absolute
Through Flex Box

Center horizontal and vertical

Relative and absolute
Though Flex Box
Through Grid

Center Horizontally

Through relative and absolute

By using relative and absolute, we can center a div horizontally let's assume that a child div is dependent on a parent div. In this kind of situation, we have to use relative and absolute by providing relative to the parent and absolute to the children.

Relative tells the children div where to start its position. And absolute tells the children to follow the absolute value of the parent.

.parent {
    position: "relative";
}
.child {
    position: "absolute";
    left: "50%";
    transform: translateX(-50%);
}

But the left 50% will not center correctly, to avoid we need to use transform: translateX(-50%); .

Through FlexBox

flexbox is the comfortable way to center a div horizontally. the only thing that the parent div should contain width by default div is a block element so, no need for manual width. flexbox contains justify-content: center to center horizontally.

.parent{
    display: "flex";
    justify-content: "center";
}

Through Margin Auto

Margin auto is the easiest way to center a div horizontally. as the div is a block element in which you don't need to add width manually.

Auto keyword in CSS with push the block to as much it can. so if you can auto on both sides. then the div gets to the center.

Margin auto needs when we don't want to add CSS to parent div.

.child {
    margin-left: auto;
    margin-right: auto;
}

/*2nd way one liner*/
.child {
    /* margin: Yaxis and Xaxis */
    margin: 0 auto;
}

Center Vertically

Similar to centering horizontally.

Through Position and absolute

It is similar to the previous but we have to use the Y axis in transform: translateY(-50%)\.

.parent {
    position: "relative";
}
.child {
    position: "absolute";
    top: "50%";
    transform: translateY(-50%);
}

Through Flex Box

Similar to the previous flexbox but justify-content: center only to center horizontally. but to center vertical, we have to use align-items: center .

Important when you center horizontally height is needed.

.parent {
  height: 100vh;
  display: flex;
  align-items: center;
}

Centering Horizontal and Vertical

Through Postion and Absolute

Centering both vertically and horizontally we have to use top and left in the child div. And using translate both the x-axis and y-axis.

.parent {
  postition: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Through FlexBox 💖

Similar to the previous one but we have to use both justify-content and align-item for centering both horizontally and vertically.

.parent {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Through Grid 🔥(easy)

If you want to center a div with one line of code 🤯. the grid has a one-line solution to flexbox by using place-items: center .

place-items: center will center both horizontally and vertically.

.parent {
  height: 100vh;
  display: grid;
  place-items: center;
}

References 🧑‍💻

Outro ❤️

I am making this series of content to help other aspiring developers who want to start their career in Web Development. It takes a lot of effort to make the series, If you really like my work Buy me a Coffee and Follow me on Twitter @tejaswan1

Top 3 React UI Libraries in 2023

Tejaswan Kalluri — Sat, 21 Jan 2023 14:19:03 +0000

There are so many Ui libraries that we are using in our React projects like Material UI, Chakra UI, etc. but you might be interested to explore new UI libraries which are easy to use like MUI or ChakraUI.

So today I want to share some underrated Ui libraries which you should definitely try.

Libraries Used in the article

Mantine UI
NextUI
HeadlessUI

1. Mantine UI

Mantine Ui is an underrated Ui library, Even I have started using Mantine UI in my personal projects.

The main advantage of using Matine UI is the Components. The components provided by the Mantine UI are lit 🔥, unlike ChakraUI the MantineUI provides 100+ components which is crazy

Mantine Ui is not only limited to components but also provides React Hooks which are useful and saves lots of time. Hooks like use-pagination for pagination use-local-storage to access local storage, use-Toggle for Toggling in the state

Features

100+ components
Predefined hooks
Provides React Form (Mantine form)
Easy-to-use CSS

Adding To Your Project

For installing Mantine UI in your React project these steps need to be followed

npm install @mantine/core @mantine/hooks @emotion/react

Index.js

import { MantineProvider, ColorSchemeProvider } from "@mantine/core";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <MantineProvider>
            <App />
        </MantineProvider>
    </React.StrictMode>
);

That's It, I will try to make a separate Article about Matine UI installation, dark theme, hooks, etc.

Link: https://mantine.dev/

2. Next UI

NextUI is a new UI library system that can be used for both React and NextJs but NextUI gives an edge if you are using NextJs. NextUI is still in beta version which is not recommended to use in production but you can try it as a side project

Features

Beautiful Components
Dark mode
Easy Next js Support
Stitches CSS customization

Adding To Your Project

For installing NextUI in your React project these steps need to be followed

npm i @nextui-org/react

index.js

import { NextUIProvider } from '@nextui-org/react';
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
         <NextUIProvider>
            <App />
         </NextUIProvider>
    </React.StrictMode>
);

Link: https://nextui.org/

3. HeadlessUI

Most of us have moved to tailwind CSS as a goto library for writing custom CSS but the problem with custom CSS is when we start making menus, switch, model boxes, etc we need to write custom javascript to handle state. HeadlessUI will solve this problem by providing basic components which are important when writing custom CSS which saves lot of time

Features

Lightweight
Easy Transitions
works with both react and vue

Adding To Your Project

For installing HeadlessUI in your React project these steps need to be followed

npm install @headlessui/react

[yourcomponent].js

import { Popover } from '@headlessui/react'

function MyPopover() {
  return (
    <Popover className="relative">
      <Popover.Button>Solutions</Popover.Button>

      <Popover.Panel className="absolute z-10">
        <div className="grid grid-cols-2">
          <a href="/analytics">Analytics</a>
          <a href="/engagement">Engagement</a>
          <a href="/security">Security</a>
          <a href="/integrations">Integrations</a>
        </div>

        <img src="/solutions.jpg" alt="" />
      </Popover.Panel>
    </Popover>
  )
}

Link: https://headlessui.com/

How to start programming for college students

Tejaswan Kalluri — Mon, 07 Jun 2021 13:10:43 +0000

1. Consistency

You need to be consistent while programming. Do not take programming as a subject take it as a hobby. Practice it like cricket.

Practice it every day, spend some time on coding take it as a hobby
I see many people that they start programming today and they never touch for a week
Or month. So be consistent

When you learn something in programming, do code on the laptop or a computer.

Because there will be a difference between playing cricket at home VS stadium. The stadium for programming is a laptop or computer. So be practical

2. Time management for college students

You have to manage both the college syllabus and programming, so You need time management to do both things, so that's why I recommend you plan a reasonable timetable.

3. Do not learn multiple languages. Be master at one language

If you learned c, c++, Java, and any other languages, that doesn't mean you are a good programmer.

If you know at least one language but if you are master at that language, that means you have more value than the person who knows 5 to 10 languages.

4. Makings projects

I see many students learn about programming, but they won't do projects in that particular language they have learned. This is similar: You know how to use a gun, but you don't know how to aim the target.
so by doing projects will make you more comfortable at programming

5. Don't be in a tutorial hell

While we are learning, we learn from college or from the internet like YouTube, articles by this you will be in tutorial hell once you learn basics of your favorite language try to do projects by yourself. It makes you more confident.

This is what I have learned from programming for the past six years