One of the major challenges in building layouts is styling the elements on the page. In this post, we’ll cover methods for centering the elements in CSS.

We’ll center align the items horizontally, vertically, or both.

Most common ways

The most common ways are,

•  Use the text-align property to center text horizontally.
• Use the line-height and vertical-align properties.
• Use the flex items requires justify-content and align-items 

Other ways

Other ways we have are,

•  Use the grid
• Use the table
• Use the Position 

We can center align the items in several ways based on requirements. Let's take a closer look at each method below.

Horizontally centering the Elements(x-axis)

We can apply different solutions for Horizontally centering the elements, on the x-axis.

1. Centering for block elements

• Using text-align property

We can align the inline elements(for inline, inline-block, inline-table, inline-flex, etc) horizontally using the text-align: center property.

• Using margin and width property

We can align the block elements horizontally centered and evenly spaced for left and right based on the given width using margin: auto; width:50% property.

Setting the width of the element will prevent it from stretching out to the edges of its container.

or

2. Using Flexbox

We can align the elements horizontally centered using display:flex; justify-content:center; property.

Here it can be centered for a single block without nested.

If we have nested elements then we should use one more property for direction, we can get the center view otherwise the nested items get split. It looks like the below for the nested items

The solution for the above item is, To add align-items and flex-direction property and remove justify-content, it looks below

3. Using Grid

We can align the elements horizontally centered using display:grid; justify-content:center; property.

And we can switch to a column and horizontal center.

4. Using Position(Dynamically using left and translate-block elements)

It can be used like dropdown menus or tooltips. Centering of the items of dynamic/unknown width which are relative to the elements or triggered one.

It can also be the same as the vertical center of block elements but using translateX and left properties.

Vertically centering Elements(y-axis)

We can apply different solutions for Horizontally centering the elements, on the y-axis.

1. Centering for block elements

• Using padding property

We can align the text and block elements(div) using the padding property. The first value can be any positive length or a percentage value. The second value should be 0.

• Using line-height property

We can align the text and block elements(div) using line-height property. A paragraph inside the div, set line-height which is equal to the height of the div.

For multiple lines, set display: line-block, line-height:normal, vertical-align:middle properties.

2. Using Flexbox

We can align the elements vertically centered using display:flex; align-items:center; property.

For column or y-axis flex layout, instead of align-items we now need to use,

3. Using Grid

We can align the elements vertically centered using display:grid; align-item:center; property.

And here align-content is scalable for multiple child elements.  It works when we switch the default grid axis (x) with grid-auto-flow:column.

4. Using Position(Using top and translate-block elements)

Centering of the items of unknown width which are relative to the elements or triggered one.

It can only be applied to translate Y to move the child 50% of its height.

Horizontally and Vertically centering Elements(xy-axis)

We have below different solutions for Horizontally and Vertically centering the elements, on the xy-axis.

1. Centering for block elements

It's the modern solution for center aligning both axes using position property. Ensure the child elements are wrapped in a below view,

Here the parent is relative and the child is absolute. Absolute position the child from the top 50% and left 50%, which is 50% of the parent's height and width, then use translate(-50%, -50%).

Cons: If it grows overflow to parent, the parent has min-width that grows with the content except for an absolute child. To fix this, go with flex or grid or any other methods like media queries.

2. Using Flexbox

We can align the elements in both axes centered using display:flex; align-items:center; justify-conentnt:center; property.

Here we need to check if it has a second item. Because the default behavior of the flex is the x-axis. To resolve if it has second or more items, we should check the flex-direction.

3. Using Grid

The most easiest and advanced one is using the grid to center both axes.

For the child, use auto-fit or auto-fill. And then for the collapse of the child use the minmax and place-content properties. Based on the width property it has space between the columns. We have 2 different views based on the two methods below,

4. Alternate Solutions

We can use margin:auto; property with flex or grid to center it. But it should have only one child item.

Conclusion

It’s not always too difficult to center an element, of course, there are many ways for it. The appropriate techniques should be chosen to solve the purpose.

Whether you're centering text, images, or a combination of elements, there's a method that will work best for your specific use case.

Understanding the requirement and picking up the easier one is the effective way to get the result.

We hope that this guide has provided you with a good starting point and the knowledge you need to tackle centering in CSS with confidence.

Now that you're familiar with the techniques for centering elements in CSS, it's time to put your knowledge into action.

If you're working on a project and need help with the UI, our team of experienced UI developers is here to help. Get in touch with us today to see how we can bring your vision to life.

 

Recommended Articles:

Difference between UI and UX

Why is UX important for your Business?

Importance of UI UX Design in Web/Mobile App Development