Jump to content
Welcome, welcome! Come in and register, and have some developer coffee. 👨‍💻 ×

Recommended Posts

image.png

Centering is one of the most difficult and common things to do for web developers.

Here are few ways to do it (from the most complicated to the simplest):

The Position Absolute method

.parent{
    position: relative
}

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

One of the old-school methods that we used before the existence of Flexbox.

The Table Cell method

.parent{
  display: table-cell;
  vertical-align: middle
}

.child{
  margin:auto;
}

In this method, table-cell together with vertical-align property are used to make the child vertically centered, while margin auto is applied to horizontally center the child.

The Flexbox method

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

This is the most common way to center an item. Here's a guide to Flexbox.

The Grid method

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

The simplest method that I found which only requires two lines of code in the parent container.

 

Did I leave out your favourite centering method? 🤔

  • Love 2
  • Good 1
Link to post
Share on other sites
  • 1 month later...
On 4/10/2021 at 8:00 PM, FlierMate said:

The look and layout are nice.

Do you have the complete CSS script for your screenshot of "Parent" and "Child"? Maybe I mean the color scheme. Thanks.

Unfortunately, I lost the file... Here's the colour scheme:
Blue - #2674B0
Red - #FF0000

  • Thanks 1
Link to post
Share on other sites
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...