Center item in css

Center item in css
0.0 0

#1

My problem is a little complicated than simply centering an item. I want to center this GitHub logo between these two red lines (h2 and #welcome-section’s end):


Here’s my pen: https://codepen.io/supuun/pen/BVvrgK
I think I can accomplish it using CSS grid, but I want more elegant method, if possible.


#2

That is the elegant method, anything else except flex will be a hack.


#3

It can be done with flexbox.

Something like:

/* Set to vertical flexbox to allow the `<a>` element to grow as much as possible */
#welcome-section {
  display: flex;
  flex-direction: column;
}

/*
  Stretch the `<a>` with flex-grow. This will give room for the icon inside to move around.
  This will require making the `<a>` itself a flexbox. Then center the icon with
  flexbox centering techniques.
*/
#welcome-section a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none; /* You might have to add this */
}

But, CSS grid is much cleaner and elegant like @DanCouper said . You can center the icon by adding only three properties to #welcome-section :wink:


#4

Thank you so much for this perfect solution as I prefer Flexbox over Grid. :blush:


#5

I’d prefer the grid solution. CSS simply gets unwieldy with more code in it.

IIRC just this much CSS can do the same effect:

#welcome-section {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-items: center;
}