How to Center a Div, Text, and More with CSS

The most difficult thing a web developer has to do is center a div horizontally and vertically using CSS. There are 100 ways to get the job done but there are some popular ways like using flex, grid, and making position absolute. In this article, as we go ahead we will discuss these top 3 ways in detail.

Introduction

One of the important elements of HTML is div. A div is just an invisible box that can contain any kind of content. Divs basically don’t have anything unique but that makes them extremely versatile most websites use lots of divs nested and complex to organize the content of the size. Although they are invisible developers use them for styling purposes.

So it becomes extremely important to center these divs. That there are many ways most popular ones are as making position absolute, display flex, and display grid. Here is the HTML code for the example I am going to provide the codedamn playground links to each example. So that you can go there and check it out.

How to center Horizontally

To center an element horizontally, you can use the margin property with a value of auto:

.image{
  width: 50px;
  height: 50px;
  margin: 0 auto;
}Code language: CSS (css)

You can also use the display property with a value of flex and the justify-content property with a value of center to center block-level elements that contain other elements:

.image{
  display: flex;
  justify-content: center;
}Code language: CSS (css)

Note that these techniques will only work if the element has a fixed width or if the parent element has a fixed width. If the width of the component is set auto, it will take up the full width available and will not be centered.

codedamn playground

How to Center Text CSS Text-Align

This is one of the simplest ways to center a text, links. This is not for the divs containing images as the name itself suggests this is only for the text

.text{
  font-size: x-large;
  box-shadow: 1px solid red;
  text-align: center;
}Code language: CSS (css)

codedamn playground

Center Property

What is CSS Margin Auto and How Do I Use It?

In CSS, the margin: auto property can be used to automatically center an element within its parent element.

To use margin: auto, you will need to specify a width for the element that you want to center. This is because margin: auto works by dividing the available space within the parent element equally between the left and right margins of the child element, effectively centering it within the parent element.

Here is an example of how you can use margin: auto to center a div an element within its parent element:

.image{
  width: 50px;
  height: 50px;
  margin: 0 auto;
}Code language: CSS (css)

codedamn playground

How do I Center a Div Horizontally with Flexbox?

Flexbox is one of the easiest ways to center things. To learn more about the CSS Flexbox you can check out this article. To the center, the div horizontally gives display to flex and justify-content to center. And the syntax for the grid system is also the same

.image{
  display: flex;
  justify-content: center;
}Code language: CSS (css)

codedamn playground

How to center vertically

How can I Center a Div Vertically with CSS Absolute Positioning and Negative Margins?

To center a div vertically using absolute positioning and negative margins, you can use the following steps:

1. Set the position of the parent element to relative. This will allow you to position the child element absolutely within the parent element.
2. Set the position of the child element to absolute.
3. Set the top and left properties of the child element to 50%. This will position the child element’s top-left corner at the center of the parent element.
4. Use negative margins to offset the child element. The amount of margin should be half of the child element’s width and height. This will horizontally and vertically center the child element within the parent element.

Here’s an example:

.parent {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: lightgray;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  margin-top: -100px; /* Half of the child's height */
  margin-left: -100px; /* Half of the child's width */
}
Code language: CSS (css)

In this example, the .child the element will be vertically and horizontally centered within the .parent element.

codedamn playground

Transform and Translate: How to Center a Div Vertically?

Make the position absolute. And set the top value to 50%. Now just use the transform property instead of the negative property. Make translate the x value to zero because we want to align vertically. And the y value to -50%

.image{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}Code language: CSS (css)

codedamn playground

How can a div be centered vertically in Flexbox?

Like we centered the div horizontally. We can also center vertically using the flexbox. The only difference is here we use the align-items property. A lot of people get confused here because the aligned items take the height of the property if not mentioned. So we have to give a height. Now the div will align to half of the size

.image{
  height: 100vh;
  display: flex;
  align-items: center;
}Code language: CSS (css)

codedamn playground

How do I center both vertically and horizontally:

Flexbox

The first and most simple method is by using the flexbox method. It’s just a combination of both the horizontal and vertical methods.

.image{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}Code language: CSS (css)

codedamn playground

Centering a Div Vertically and Horizontally With CSS Absolute Positioning

Before flexbox has invited this method is the popular one. First, let’s see the syntax

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}Code language: CSS (css)

This will position the div at the center of the page by setting its position to absolute and then using the top and left properties to position the top left corner of the div at the center of the page. The transform property is then used to move the div back up and to the left by half of its own width and height, effectively centering it on the page.

Centering a div vertically and horizontally with Transform and Translate

To center a div vertically and horizontally using transform and translate, you can use the following technique:

1. Set the position of the div to “absolute” and specify a top and left value of “50%”. This will position the div at the center of the container.
2. Use the “transform” property to translate the div by half its width and height, so that the center of the div coincides with the center of the container.

Here is an example of how you can do this:

.container {
  position: relative; /* This is the container that will hold the centered div */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Translate the div by half its width and height */
}
Code language: CSS (css)

Here is the HTML code for the example:

codedamn playground

This technique works because the transform property allows you to modify the position, scale, and rotation of an element in the 2D or 3D space. The translate function moves the element by the specified distances in the X and Y directions. By using negative values for the translate function, the element is moved up and to the left by half its width and height, which effectively centers it within the container.

CSS Grid

CSS Grid is the latest way to center a div. It comes with a lot of additional features. If learn more about it visit this article.

Here is an example to center a div with a grid

.grid{
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.image{
  align-self: center;
  justify-self: center;
}Code language: CSS (css)

codedamn playground

Here I have created a parent div in which my image div is present. the grid-template-rows and grid-template-columns properties are used to create a single-cell grid. The div element is then placed into the grid cell, align-self and justify-self properties are used to center it both horizontally and vertically within the cell.

One thing you have to keep in mind is that the grid is the latest technology. So it is not supported by every browser. If your creating the website with a grid layout make sure you check the browser’s supportability. You can use the above-mentioned methods as they are older ones and supported by each and every browser.

Note that these techniques will only work if the element has a fixed width or if the parent element has a fixed width. If the width of the component is set auto, it will take up the full width available and will not be centered.

Conclusion

In conclusion, centering elements with CSS can be a useful design technique for creating visually appealing and well-organized layouts. If you utilize the various methods outlined in this blog post, you will be able to easily center divs, text, and other elements on your web page by using the methods outlined in this post.

The techniques described here should help you achieve your desired result no matter if you are trying to center a single element or a group of elements. Make sure you test your code on different browsers and devices in order to ensure that it looks and behaves as you intended it to. With a little bit of practice and experimentation, you’ll be able to align elements with confidence and create professional-looking web pages.