DEV Community

Cover image for 3 Easy Ways to Center in CSS
Hillary Nyakundi
Hillary Nyakundi

Posted on

3 Easy Ways to Center in CSS

A common task while using CSS is trying to figure out how to center text or images. Personally I have encountered this while trying to develop a project, but I found out a way of that.
I will show you the ways to get around that problem in an easy manner.

Lets get started:

  • Method 1
display: grid;
place-items: center;
Enter fullscreen mode Exit fullscreen mode

Example:

Without style:

Alt Text

After Adding code snippet:

Alt Text

  • Method 2 Center both horizontally and vertically
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Enter fullscreen mode Exit fullscreen mode

We will and center an image:

Without style:

Alt Text

After Adding code snippet:

Alt Text

  • Method 3
display: flex;
align-items: center;
justify-content: center;
Enter fullscreen mode Exit fullscreen mode

Without style:

Alt Text

After Adding code snippet:

Alt Text
Now go forth and center all the things.

Like my work:
ko-fi

Connect With me at Twitter | Insta | YouTube | LinkedIn | GitHub

Do share your valuable opinion, I appreciate your honest feedback!

Enjoy Coding ❤

Top comments (2)

Collapse
 
obaino82 profile image
Obaino82

Nice one👌

Collapse
 
larymak profile image
Hillary Nyakundi

Thank You ;)