horizontally center Div in another Div

When we are working with tables and multi-column web page layout then we have to horizontally center Div in another Div. Many time beginners get confused how to resolve this, they try simple CSS codes to make a div horizontally align inside other Div. There are multiple ways which we can be used to resolve this situation. Because its programming and there are multiple ways to do one task with the same output.

Did you know How To Change input placeholder color with CSS

If you want to horizontally center Div in another Div, then you can do this by fixing the width and margin of your div tags. Width tag will help to allocate the space on the webpage and margin will decide their difference with other block elements.

Let’s suppose we have two div, one is called parent and other is called the child. Now we will align the child inside parent by just applying the display and margin, Here is the code below which you can also test in your browser and web development tool.

In the above code, we have used the display property and set tables as the value, because we want to show child div inside of parent div.

Did you know How To Set cellpadding and cellspacing in CSS

We have another alternative too for the same task which is to set the width and use the text-align property to apply on parent div tag and child div tag displayed as inline-block, here is the code below which you can test own too.

This code will also do the same task, with just little variation. The width of a parent is set to 100 percent which’s mean now width is getting responsive. Text align property will effect to child tags to align as the center. Inline-block will force the child div to get inside of the parent.

Did you know How To Proportionally CSS Scale Images

Here is the advanced method to resolve this situation, we can now make our code cross-browser effective, mean code once and all apply to all browsers. It’s for those who have to horizontally center Div in another Div for active websites. You can copy the following code.

In the above code, I have used the comments to explain the purpose of the code. Like I have created the code which is applied on FireFox, Safari, Chrome, and Opera too. The major properties are.

  • Display
  • Box-Pack
  • Box-Align

First, we have set the property of div as the block in a display. By the way, DIV is a block element. Then use a box-pack property to make center align the div content and box-align to set it horizontally child div. It depends on you if you want to allocate the width then do code as above, but if don’t then simply remove the width property.

Did you know Create CSS Transition Shorthand with Multiple Properties

You can also use some other properties of CSS3 too for horizontally center Div in another Div. Such as the box-orient, box-flex, box-direction. Let’s have a look at the flex based code.

You can easily understand what’s each property is doing, by this, you can create more advanced and responsive codes for the same problem. I hope one of this code will be worked for you. If you have still any confusion then don’t shy to comment.

SHARE