How to Center a Div Horizontally and Vertically in CSS

Centering a div horizontally and vertically in CSS can be achieved through a variety of methods, including using the display: flex and display: grid properties, position: absolute and transform: translate, display: table and display: table-cell, and line-height.

Centering a div allows you to place an image or text in the center of a page, improving the design and functionality of your web page. Understanding how to center a div in CSS is essential for creating responsive websites that maintain a visually appealing layout on various devices and screen sizes.

Without wasting any more time, let’s examine how each of these methods work.

5 Methods to Center a Div Horizontally and Vertically in CSS

1. Display: Flex 

The display: flex method uses the CSS flexbox layout to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

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

And then add the following CSS to the div:

div {
  width: 50%;
  height: 50%;
}

More on DesignWhat Is an iFrame?

2. Display: Grid

The display: grid method uses the CSS grid layout to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

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

And then add the following CSS to the div:

div {
  width: 50%;
  height: 50%;
}

3. Position: Absolute and Transform: Translate

Using position: absolute and transform: translate utilizes absolute positioning and the transform property to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

.container {
  position: relative;
  height: 100vh;
}

And then add the following CSS to the div:

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

4. Table and Table-Cell

Using table and table-cell display relies on the display property to mimic the behavior of a table cell, which will center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

.container {
  display: table;
  height: 100vh;
  width: 100%;
}

And then add the following CSS to the div:

div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 50%;
  height: 50%;
}

More on DesignHow to Create a User-Centered Dashboard Wireframe

5. Line-Height

The line-height method uses the line-height property to center the div both horizontally and vertically within its parent container. You can add the following CSS to the parent container:

.container {
  height: 100vh;
  width: 100%;
  text-align: center;
}

And then add the following CSS to the div:

div {
  display: inline-block;
  line-height: 100vh;
  vertical-align: middle;
  width: 50%;
  height: 50%;
}

Advantages of Centering a Div Horizontally and Vertically

These are five simple methods for centering a div horizontally and vertically in CSS. Depending on your specific use case, you may choose one method over another.

Each of these methods has its own strengths and weaknesses, and the best method for your specific use case will depend on the context and requirements of your project. Regardless of which method you choose, centering a div in CSS can greatly improve the design and usability of your web page.