How to center things in CSS 💘
#css#html#beginners
Jayesh Tembhekar ⚡

Jayesh Tembhekar ⚡ @mindset

About: Front-end Development, UI/UX Designer 🌈& a Data Science 📊 enthusiast.

Location:
India
Joined:
Sep 30, 2019

How to center things in CSS 💘

Publish Date: Mar 8 '20
193 11

Yo devs ! 🔥

A quick guide on "How to center things in CSS" 🙌

Most of the time, you write great CSS code from colors to complex animations.
But I know most of us (beginners) still struggle to center elements on a viewport perfectly.

Don't worry devs, you are no longer be an noob at the end of this short guide.

Let's get started

There are two ways to center any HTML element on a web page :

1. Using Flexbox

2. Using Transform

  • Using Flexbox

HTML code as shown below 👇

  <body>
    <div class="container">
      <div id="object"></div>
    </div>
  </body>
Enter fullscreen mode Exit fullscreen mode

Now the CSS code


html,
body,
.container {
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
}

#object {
  height: 100px;
  width: 100px;
  background: red;
  align-self: center;
}
Enter fullscreen mode Exit fullscreen mode
  • Using Transform

HTML code shown below 👇


<body>
    <div class="element"></div>
</body>
Enter fullscreen mode Exit fullscreen mode

Now the CSS code


.element
    {
        width: 100px;
        height: 100px;
        background: coral;           
    }

.element
    { 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
    }
Enter fullscreen mode Exit fullscreen mode

Check out my other posts too 🥂

Author: Jayesh 🧡

Comments 11 total

  • danielpdev
    danielpdevMar 8, 2020

    You could also use the old style:

    #content {
    margin: 0 auto;
    }
    but this works only on block elements, so just add display: block; for inline elements.

    Thanks for sharing!

    • Alvaro Montoro
      Alvaro MontoroMar 9, 2020

      That would only center horizontally though.

      • danielpdev
        danielpdevMar 9, 2020

        Yes, that's right.
        Although, to align both horizontally and vertically you can also use margin in combination with position.

        here is an example

  • Dima
    DimaMar 8, 2020

    display: flex for parent
    margin: auto for centered block

  • Tobias SN
    Tobias SNMar 8, 2020

    I generally use this website: howtocenterincss.com

  • Adithya Sreyaj
    Adithya SreyajMar 8, 2020

    Flex for life 🧡

  • mark l chaves
    mark l chavesMar 9, 2020

    Nice.

    Just to add, I usually give the flex container the responsibility of aligning its children. E.g.

    <section>
  <div id="object"></div>
  <div>Hello World!</div>
</section>

    section {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* To vertically align all items added to the flex--not just one. */
}

    Then any time you add another child, they will automagically align in the centre. In the example above, the children will align in one column because I specified flex-direction: column;.

    Demo on CodePen.

    Question @mindset ,

    Why define the .element class twice on top of each other? Is there an advantage to that?

    Here's how I would have done it.

    • Jayesh Tembhekar ⚡
      Jayesh Tembhekar ⚡Mar 9, 2020

      Not an advantage, just to separate main transform properties for easy understanding 😅

      • mark l chaves
        mark l chavesMar 9, 2020

        Ok. Cool. I typically don't see that style unless it's a mistake. That's why I asked.

        If you want to be more OO-like, I would delegate alignment to another class. Then add that class to the class list in the HTML. Like what I've shared with you above. Similar to multiple inheritance.

        Then .demo-box and .centre-me are reusable.

        Thanks!

  • Khaled Breaker
    Khaled BreakerMar 10, 2020

    just add to the parent div {

    display: flex;
    justify-content: center;
    align-items: center;

    }

  • Habdul Hazeez
    Habdul HazeezApr 12, 2020

    With CSS Grid:

    .selector {
    display: grid;
    place-items: center;
}

    I wrote about it in the following post:

    ziizium image

    My WebDev Notes: Center page elements with CSS Grid

    Habdul Hazeez ・ Apr 3 ・ 3 min read

    #html #css
Add comment