Centering techniques for positioning elements

Horizontal Centering

For inline elements, simply set text-align: center on the parent element. This method works for inline elements like span, a, img, etc.

.parent {  
  text-align: center;  
}  

For block-level elements, set a width and use margin: 0 auto. Note that the element must be a block-level element, and the width cannot be auto.

.box {  
  width: 200px;  
  margin: 0 auto;  
}  

Flexbox provides a more flexible way to achieve horizontal centering by setting justify-content: center on the parent container.

.container {  
  display: flex;  
  justify-content: center;  
}  

Vertical Centering

For single-line text, use line-height equal to the container height.

.container {  
  height: 100px;  
  line-height: 100px;  
}  

Absolute positioning combined with negative margins is a traditional method, requiring knowledge of the element's exact dimensions.

.parent {  
  position: relative;  
}  
.child {  
  position: absolute;  
  top: 50%;  
  height: 50px;  
  margin-top: -25px;  
}  

Flexbox simplifies vertical centering by setting align-items: center.

.container {  
  display: flex;  
  align-items: center;  
}  

Absolute Centering

Absolute positioning combined with transform is the most commonly used modern solution, as it doesn't require knowing the element's dimensions.

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

Grid layout offers the most concise solution for absolute centering with minimal code.

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

Special Scenarios

For floated elements, additional handling is required. A common solution is to wrap them in a relatively positioned container.

.wrapper {  
  position: relative;  
  float: left;  
  left: 50%;  
}  
.inner {  
  position: relative;  
  left: -50%;  
}  

Table cell content can be centered using the vertical-align property.

td {  
  vertical-align: middle;  
  text-align: center;  
}  

Responsive Centering Techniques

Viewport units can be used for full-screen centering, suitable for scenarios like modals.

.modal {  
  position: fixed;  
  top: 50vh;  
  left: 50vw;  
  transform: translate(-50%, -50%);  
}  

CSS variables combined with calc() enable dynamic centering.

:root {  
  --element-width: 300px;  
}  
.element {  
  width: var(--element-width);  
  margin-left: calc(50% - var(--element-width)/2);  
}  

Centering Multiple Elements

Flexbox can handle centering multiple child elements by combining flex-direction and flex-wrap.

.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
}  

Grid layout provides a more intuitive way to center multiple elements, controlling the number of columns with grid-template-columns.

.grid-container {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
  place-items: center;  
  gap: 20px;  
}  

Browser Compatibility Solutions

For older browser support, multiple techniques can be combined to create fallback solutions.

/* Modern browsers */  
@supports (display: grid) {  
  .container {  
    display: grid;  
    place-items: center;  
  }  
}  

/* Legacy browsers */  
@supports not (display: grid) {  
  .container {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
  }  
}  

IE10/11 require special handling for the transform centering method.

.center {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  /* Fallback for IE10/11 */  
  margin-left: -50px; /* Half the element's width */  
  margin-top: -50px; /* Half the element's height */  
}