How to center social media icons using CSS

Almost every website today gives a social sharing option and to do that we put social media icons along with their corresponding links in the footer section of our website.

Center social media icons using CSS

However, as a beginner, it becomes very difficult when we need to align these social media icons either horizontally or vertically.

So, in this tutorial, we will discuss various easy methods to center social media icons using CSS.


Center social media icons using text-align property

The easiest method to center align social media icons is using the text-align: center; property.

To do that, place all the social media icons inside a <div> element and apply text-align: center; property on this div. This will automatically align all the social media icons in the center of this div element.

Here is a working example:

Example:

div.centered{
    text-align: center;
}

Note: In this example, we are using font-awesome icons.


Center social media icons using CSS flexbox

CSS flexbox is also a great choice to center social media icons. In this approach, we have to first make the parent <div> element a flex container. This is done by applying display: flex; property.

Once it is done, we can center align its flex items(child elements) using the justify-content: center; property. This will automatically align all the social media icons in the center of the div.

Here is a working example:

Example:

div.centered{
    display: flex;
    column-gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}

Note: The flex-wrap property decides whether or not the flex items should be placed onto a new line if enough space is not available.


Center Social Media Icons using CSS Grids

CSS grid is also another great choice to center social media icons in the footer of your website. This method is almost similar to the flexbox method.

To apply grid properties on the social media icons, we have to first make the parent <div> element a grid container. Which we can do by applying display: grid; on it.

Once it’s done, we can center the social media icons by applying justify-content: center; on the parent grid container.

By default, the CSS grids put all grid items in a single column. But, that’s not what we want. To manipulate the number of columns along with their width, we can use the grid-template-columns property.

Here is a working example:

Example:

div.centered{
    display: grid;
    column-gap: 5px;
    justify-content: center;
    grid-template-columns: auto auto auto auto;  /* Specifies 4 columns each of auto width  */
}

Center Social Media Icons using margin: auto

If you don’t want to use CSS flexbox or grids to center align the social media icons, margin: auto; can be a good alternative for you.

Applying margin: auto; directly on the parent element will not center the social media icons. To make it happen, you have to set the width of the parent element too.

Here is a working example:

Example:

div.centered{
   margin: auto;
   width: 33.33%;
   column-gap: 5px;
}

Center Social Media Icons both horizontally and vertically

We have so far discussed various different methods to center align social media icons horizontally. But you might sometimes need to align these icons both horizontally as well as vertically.

To center align social media icons vertically, you can take the help of the align-items property. This property can be used with CSS Flexbox as well as with CSS Grids.

Use:

  • justify-content: center; – To center align horizontally
  • align-items: center; – To center align vertically

Here is a working example:

Example:

div.centered{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    height: 300px;
    border: 2px solid red;
}

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.