Centering (vertical & horizontal)

Learn how to center elements horizontally, vertically, or both using CSS Flexbox, Grid, and more with simple examples.

Loading...
Centering (vertical & horizontal)

What is Centering?

In CSS, centering means positioning an element in the middle of its parent container. This can be done:

  • Horizontally (from left to right)
  • Vertically (from top to bottom)
  • Both (perfectly centered in the center of the container)

Horizontal Centering

  1. text-align: center; (For Text or Inline Elements)

This method is used to center inline or inline-block elements like text, buttons, or spans.

<div class="container">
  <p>This text is centered horizontally.</p>
</div>

CSS:

.container {
  text-align: center;
}
  1. margin: auto; (For Block Elements)

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

<div class="container">
    <p class="box">This box is centered horizontally.</p>
</div>

CSS:

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

Note: This does not work without a defined width.

  1. Flexbox
<div class="container">
  <div class="item">I’m horizontally centered using Flexbox.</div>
</div>
.container {
  display: flex;
  justify-content: center;
}

Vertical Centering

Vertical centering used to be hard in older CSS versions. But now we have simple ways using Flexbox and Grid.

  1. Flexbox
<div class="container">
  <div class="item">I’m vertically centered!</div>
</div>
.container {
  display: flex;
  align-items: center;
  height: 200px;
}

Note: The parent must have a height for vertical centering to work.

  1. Line Height (For Single-line Text)
<div class="container">
  <span>Vertically centered text</span>
</div>

CSS:

.container {
  height: 200px;
  line-height: 200px; /* Makes the line box as tall as the container */
  text-align: center; /* Horizontally centers inline text */
}
 
/* Optional: Reset the span's line-height to default.
   This is helpful if the span has nested elements or icons.
   But for single-line text, it's not required. */
 
.container span {
  line-height: normal;
}

Note: Only works well for single-line text.

Centering Both (Horizontally + Vertically)

  1. Flexbox (Most Common & Reliable)
<div class="container">
  <div class="item">Perfectly centered box</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center; 
  height: 300px;
}
  • justify-content: center: centers horizontally
  • align-items: center: centers vertically
  1. CSS Grid
<div class="container">
  <div class="item">Centered using Grid</div>
</div>

CSS:

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

place-items: center: shorthand for both horizontal and vertical centering.

  1. Position + Transform
<div class="container">
  <div class="item">
    I'm centered with absolute positioning with transform property!
  </div>
</div>

CSS:

.container {
  position: relative;
  height: 300px;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  • top: 50%; left: 50%; puts the top-left corner in the center
  • transform: translate(-50%, -50%); moves it back to actual center

This method is great for centering inside unknown-height containers, but this can be tricky with responsiveness.

Centering in Full Screen (Viewport)

To center content in the full height of the screen:

<div class="container">
  <h1>I'm centered on the screen</h1>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

100vh = 100% of viewport height

Centering Inline Elements

To center inline elements (e.g., <button>, <a>, <span>), you can use the text-align property.

<div class="container">
  <button>Centered Button</button>
</div>

CSS:

.container {
  text-align: center;
}

Centering Images

Images are inline elements by default, so how you center them depends on the context — whether inside a block container, or you want to center the image itself as a block.

Horizontal Centering of an Image

Using margin: auto on the image itself (make it block)

For this, the image needs to be a block-level element with a defined width.

<div class="container">
  <img src="image.jpg" alt="Sample Image" />
</div>

CSS:

img {
  display: block;
  margin: 0 auto;  /* centers block horizontally */
  width: 300px;    /* set image width */
}

Vertical Centering of an Image

Using Flexbox for vertical centering

<div class="container">
  <img src="image.jpg" alt="Sample Image" />
</div>

CSS:

.container {
  height: 300px;
  display: flex;
  align-items: center;  /* vertical center */
}

Centering Image Both Horizontally and Vertically

  1. Using Flexbox (most common and simple)
<div class="container">
  <img src="image.jpg" alt="Sample Image" />
</div>

CSS:

.container {
  height: 300px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}
  1. Using CSS Grid
<div class="container">
  <img src="image.jpg" alt="Sample Image" />
</div>

CSS:

.container {
  height: 300px;
  display: grid;
  place-items: center; /* centers both horizontally and vertically */
}
  1. Using Position + Transform
<div class="container">
  <img src="image.jpg" alt="Sample Image" />
</div>

CSS:

.container {
  position: relative;
  height: 300px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Tip: Whenever possible, use Flexbox or Grid, they’re the most modern, responsive, and easy-to-read ways to center content.

Support my work!