4 ways to center a component/div in CSS

#webdev #css #beginners #javascript

Flexbox
Grid
Margin auto on a flex item
Position

/* Using Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

/* margin auto on a flex items */

.parent {
  display: flex;
}
.child {
  margin: auto;
}

/* Using Position */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%); /* OR right: 0; bottom: 0; */
}

Top comments (1)

Manuel Artero Anguita 🟨 • Mar 9 '22

Concise post. Love it :)

Car Dashboard Monitor Interface

TD! - Dec 15 '24

This is How All Good React Developers Structure Their State.

daniel ukuhor - Jan 18

Personal Profile Card Interface

TD! - Dec 15 '24

Lessons from My First few Months as an Intern: What I Wish I Knew

ASVIN - Dec 15 '24

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

DEV Community