7 Methods for Centering Elements in CSS

In front-end development, it is often necessary to center elements. CSS provides various techniques to achieve centering, with different methods and effects depending on the context.

It is essential to remember their application scenarios for proper centering. This article provides a brief overview of centering methods in CSS.

Element Types

In CSS, elements can be broadly categorized into the following types:

1. Block-level Elements

These elements are displayed in a block form on the page, with each block-level element occupying its own line (unless modified by other CSS properties). Block-level elements can have set widths, heights, padding, and margins.

Some common block-level elements include <div>, <p>, <h1>-<h6>, <ul>, <li>, <section>, <footer>, and others.

2. Inline Elements

Inline elements, also known as inline-level elements, are displayed in an inline form on the page. They do not occupy a separate line but rather appear side by side with other elements on the same line. The width and height of inline elements are determined by their content and cannot be explicitly set.

Some common inline elements include <span>, <a>, <strong>, <em>, <img>, <input>, and others.

3. Inline-block Elements

These elements are displayed in an inline-block form, combining characteristics of both inline and block elements. Like inline elements, they can have set widths, heights, padding, and margins. Inline-block elements appear on the same line, but they retain whitespace spacing between them.

Some common inline-block elements include <button>, <label>, <select>, <textarea>, <img>, and others.

1. Using text-align: center for Centering

You can achieve horizontal centering of inline elements in CSS by using text-align: center. This technique leverages the text-align property in CSS to adjust the text alignment of an element and achieve a centered effect.

<div class="container">
  <span>Center Text</span><br>
  <img src="1.jpg" alt=""><br>
  <input type="text" value="test value">
</div>

.container {
   text-align: center;
} 

In the example above, the text-align property of the container is set to center, causing the text inside the container to be horizontally centered. Since the default width of inline elements is equal to the content width, adjusting the text alignment allows the element to be horizontally centered within the container.

It’s important to note that this method is suitable for inline elements and not applicable to block-level elements. For block-level elements, you can wrap them in a container and apply text-align: center to achieve horizontal centering.

This is a simple and commonly used method, especially effective for horizontally centering inline elements like text, buttons, icons, and more. However, it only achieves horizontal centering, and for vertical centering, other layout methods need to be employed. If the element is a single line of text, vertical centering can be achieved by setting the line-height equal to the height of the parent element.

2. Using margin: 0 auto for Centering

To horizontally center a block-level element, you can use the margin property by setting the left and right margins to auto.

.container {
   width: 300px; /* fixed width */
   margin: 0 auto; /* make it center */
}

In the example above, the container’s width is set to a fixed value, and then margin: 0 auto; is used to set the left and right margins to "auto," achieving horizontal centering.

By setting both left and right margins to "auto," the browser automatically distributes the remaining space evenly between the margins, thus centering the element.

This method is suitable for block-level elements with a fixed width.

3. Using Flexbox to Center Elements

Flexbox, a flexible box layout, allows you to center elements within a container by setting the container’s display property to flex and using the justify-content and align-items properties for horizontal and vertical centering, respectively.

.container {
   display: flex;
   justify-content: center; /* Horizontal Centering */
   align-items: center;     /* Vertical Centering */
} 

Flexbox also provides other properties such as flex-direction, flex-wrap, align-content, etc., allowing for further layout adjustments based on specific needs. Using Flexbox makes it easy to achieve various centering effects and boasts excellent browser compatibility.

4. Using Grid to Center Elements

Grid layout, another powerful layout model, can also be used to center elements. By setting the container’s display property to grid and using the place-items property set to center, the elements will be centered within the container.

.container {
  display: grid;
  place-items: center; /* Horizontal and Vertical Centering */
}

In the above code example, place-items: center achieves both horizontal and vertical centering. If you only want horizontal centering, you can use justify-items: center. If you only want vertical centering, you can use align-items: center.

5. Using Positioning and Negative Margin for Centering

First, set the container’s left margin to 50% (relative to the parent container), then use transform: translateX(-50%); to horizontally center the element by shifting it left by 50% of its width.

Here are examples for horizontal and vertical centering.

For horizontal centering:

.container {
  position: relative;
}

.center-horizontal {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

For horizontal and vertical centering:

.container {
  position: relative;
}

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

Set the positioning property of the element to absolute. By setting both the top and left properties to 50%, the element's top left corner will be at the center of the container.

Finally, use the transform property and the translate function to shift the element up and left by half of its own width and height, achieving vertical centering.

Using absolute positioning and negative margins can be applied to different types of elements, including block-level and inline elements. This is a concise and effective method that allows for quickly achieving horizontal centering layouts.

6. Using the calc() Function for Centering

The calc() function performs simple mathematical operations and returns the calculated result as a CSS property value.

Utilizing the calc() function allows for flexible calculations and layouts based on specific needs, achieving horizontal or vertical centering.

For horizontal centering, you can use the calc() function in conjunction with percentages and pixel values to calculate the left and right margins of the element. This can be achieved by subtracting 150 pixels (half of the element’s width) from 50% (half of the container’s width).

.container {
   width: 300px;
   margin-left: calc(50% - 150px);
   margin-right: calc(50% - 150px);
} 

For vertical centering, the calc() function can be used with percentages, pixel values, and viewport units (such as vh) to calculate the top and bottom margins of the element. This can be achieved by subtracting 200 pixels (half of the element’s height) from 50vh (half of the viewport height).

.container {
   width: 300px;
   margin-left: calc(50% - 150px);
   margin-right: calc(50% - 150px);
} 

Please note that the calc() function is well-supported, but when using it, ensure the correctness of the calculation expressions and consider browser compatibility.

7. Using Tables for Centering

Table layout can be employed to achieve centering of elements. While table layout is not commonly used in modern responsive design, it can still be a solution in certain specific cases.

To center an element using table layout, you need to create a table containing a single cell and place the element within that cell.

.container {
   display: table;
   width: 100%;
}
.content {
   display: table-cell;
   text-align: center;
}

<div class="container">
   <div class="content">
     <div>center value</div>
     <p>center value 1</p>
   </div>
</div>

In the example above, the container’s width is set to 100% to fill the width of the parent container. The parent container is set to display: table, and the child container is set to display: table-cell. Additionally, text-align: center is used to horizontally center the element.

<div class="box">
    <div class="son"></div>
</div>

<style>
  .box{
     width: 200px;
     height: 200px;
     background-color: aqua;
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }
  .son{
     width: 50px;
     height: 50px;
     background-color: blueviolet;
     display: inline-block;
   }
</style>

It’s important to note that using table layout may impact the semantic structure of the document, so it should only be used when appropriate. In modern CSS layout, using Flexbox or Grid layout is more recommended as they provide more flexible and semantic layout options.

Summary

This article has covered several commonly used techniques for centering elements in CSS, primarily focusing on horizontal centering.

Depending on specific needs and layout requirements, choosing an appropriate method to achieve the desired centering effect is key. These methods can be used individually or in combination, depending on the layout and design considerations.

Additionally, other CSS properties and techniques can be employed to further optimize and fine-tune the centering effects.