If you?re just getting into styling websites with CSS, it can be quite challenging. Sometimes even the most simple of ideas can be a challenge to execute. With CSS (and programming in general) there is rarely only one way of doing something, and this can make it easy to confuse your options with one another. This guide should act as a reference for 5 easy ways to center an element within its parent.
When we talk about elements on a page, for this example, we will be using two simple <div>s. One, the ?parent element?, will be acting as a container, and the other, the ?child element?, will be acting as the <div> that we want to center.
Our Example
The basics of our example are simple. I?ve created a simple parent div and child div of, essentially, arbitrary sizes. With only the colors and the sizes determined, this is what our page would look like.
Centering a div horizontally
Text-Align
This one may already sound like a strange option. I haven?t mentioned any text within the child element, so why do I care about aligning the text? While it is true that the text-align property is primarily used for centering text on a page, it can also be used for divs.
The trick with using text-align is to think about exactly what we are trying to do. That seems obvious, but what I mean by that is that often times when people approach their problem with this method, they will go straight to the child element and throw the property on there. What will that actually accomplish? If the child element did in fact have text, this would center that text, but it would not center the element itself, only it?s contents.
What we actually have to do is go to the parent element and give it the property text-align:, with the value of center;. This by itself will not work, however. That is because the child element is, by default due to the nature of a div, spanning to the width of its parent element. To override this we must also give the child a property of display: with a value of inline-block;.
Margin
When we want to use the margin approach we have to think about this in the opposite way. We do not want to touch the parent element, we just want to give the child a margin that will push it away from its sides. We can, of course, go through the trouble of throwing various amounts of pixels at it to try to get it closer to the center, but there is a much easier, and more effective way of accomplishing this. Simply give the child element a property of margin: with a value of 0 auto;. This will automatically size the margin on the left and right sides of the div evenly to one another.
Centering a div both horizontally and vertically
Relative positioning
This method of positioning has the most straightforward name, but some of the more complex additional properties and values that go along with it.
The first thing we have to do is assign a value to the child element of position: to the value of relative;. That on its own may not prove to be too impressive. So far all we?ve done is tell the element that we are going to be moving it around and that we are going to be moving it relative to its starting position. Putting what we want to achieve in simple terms, we want to move the top halfway down, and the left halfway over from where it initially was paced on the page, so let?s do just that.
We can do this by assigning two more properties, top: and left: both to the value of 50%;. This 50% is referring to 50% of the size of the parent that this element lives within. This doesn?t look quite right just yet, does it? What happened on the screen so far is exactly what we told the screen to do. We moved the top side down halfway, and the left side over halfway. Maybe that’s not exactly what we wanted after all.
Our actual goal is to move the center of the box down and over. We could technically just adjust the percentages of our top and left values to be more accurate to what we want, but there is a much more effective way of accomplishing this.
We can use another property called transform: here. This is a powerful tool that I recommend spending some time looking into. Transform is used for all sorts of things including rotating, resizing, and even moving elements. We?re going to focus on that last one of course. The important thing here is that the transform property is going to transform this child element in relation to itself, not the parent element. That being said, we can add the value of translate(-50%, -50%) to the transform property.
The syntax here is odd, I?ll admit. The first value within the parenthesis is referring to the upward/downward movement, and the second is for left and right. positive percentages will move the element down or right, respectively, whereas negatives will move the element up or to the left. The percentage itself is, again, referring to the size of the actual element. To sum it up, this value is stating that we want to move (translate) the element up by half of its own height, and to the left by half of its own width.
Absolute positioning
This one is a bit different from the other methods, as it has its own caveats. The element will be positioned in relation to the elements first relatively or absolutely positioned parent element. If no such parent exists, however, it will be positioned relative to the page itself.
Another important note is that absolute positioning, unlike the other methods we?ve discussed, will remove the element from the flow of the page. This means that the element will now be able to overlap the other elements of the page if used incorrectly.
If we follow the same steps as the relative positioning method discussed above, we will find similar results, however, the element will appear centered on the screen, not necessarily centered within its parent.
To remedy that, we can simply add position: relative; or position: absolute; to the parent element as well.
Display Flex
This is by far my favorite way of centering anything. I think it is simple and versatile, and once you get this working you can really break into the power of flexbox, which makes the positioning of elements on a page a breeze. If you like this trick I recommend playing through flexbox froggy to really familiarize yourself with this powerful tool.
With Flexbox we have to make sure we go back to the same mentality that we talked about with text-align earlier. We want to position the child element within the parent element, and we are going to do that by turning the parent into a flexbox. The flexbox does not affect the positioning of the element itself, but it will change the positioning of the contents (children) within the element.
All we have to do is assign the parent element the property of disply: with a value of flex; before we start seeing some changes. The child element has now been pushed all the way to the left. Another way of saying that is that the contents of the flexbox have become left-justified. we can change that by adding a property of justify-content: with a value of center; which will center-justify that element. We can then choose to vertically align this element within its parent by adding an align-items: property with a value of center; as well. That?s it! There?s no need to do any styling to the child element.
As I mentioned earlier this is by no means a complete list of all the ways to center a div within another div, but there should be enough here to help you get started. I strongly encourage you to dive deeper into the methods I?ve outlined above (w3schools is a terrific resource for that), as well as look into additional methods that I did not touch on in this article.
