Sometimes when making a web site, you may need to center your div element horizontally inside of another container on your HTML page. There are different methods and webmasters should know how to properly use all of them. We will describe all aspects of fixing this issue and you can choose the most suitable solution which works correctly in your specific case.
Method 1 - Auto Margin
This is the most popular and preferred method of centering div element inside of another. It can be used in various situations, for example, when making a site container or adding table, logo, image or any other element.
We will show how to add child div element, which is fluid and may auto scale inside of browser window when screen size is changed, for example, when device is rotated from portrait to landscape mode. This work flow usually occurs on tablet or mobile devices and content has to be presented correctly in all circumstances.
HTML code
<div class="parent">
<div class="child">Hello World</div>
</div>Following is the CSS code for the responsive child element. This means that div element may fit the screen on small screen sizes.
.child {
max-width: 1000px;
margin: 0px auto;
}In some cases, you may want to set size of the child container, which is usually needed for buttons, icons or logotypes. To make this, you may use width property, as described below.
.child {
width: 200px;
margin: 0px auto;
}Or you can use percentage value for the width property, then the child element will auto scale when parent div element is resized.
.child {
width: 30%;
margin: 0px auto;
}Method 2 - Inline block
This is also well known and easy to use method, we can convert child element from block display type to inline block and set appropriate text-align property for the parent div element to center child content horizontally.
HTML code
<div class="parent">
<div class="child">Hello World</div>
</div>CSS code
.parent {
text-align: center;
}
.child {
display: inline-block;
}But inlined blocks are not always suitable in web design, because content positioning may not be precise on your page. It means that elements can be shifted a little or there may be unnecessary spacing between child containers. That’s because you may have space or tab characters in your code or the line-height property is too tall. To avoid this, you may choose to use first method with auto margins.
Method 3 - Flexbox
This is advanced technology that was designed to give more flexibility in making various layouts on your web site. You have to set flex display type for the parent div element and also use justify-content property to center content horizontally.
HTML code
<div class="parent">
<div class="child">Hello World</div>
</div>CSS code
.parent {
display: flex;
justify-content: center;
}Optionally, you can also center elements vertically by using align-items property and it also has to be set to center, see CSS code example below.
CSS code
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}But, as you probably already noticed, there is a height property. It has to be added in this case, since the vertical alignment may not work if height of the parent element is not known.
We recommend you to read full specification of the flexbox technology and learn how to use it properly in your CSS and HTML code. There are many other useful features and you’ll be able to build more advanced layouts.
Method 4 - absolute positioned elements
This method is not suitable for changing position of regular web content, since your elements will be taken out of original document flow. However, this may be useful when you need to create popup windows, notifications or just to place some content in unusual location on your HTML page.
To center elements horizontally, you need to configure both parent and child elements correctly, otherwise your code may not work and you’ll see unexpected or even strange results.
Parent element must be set as relative in your CSS code, you will have to set position property for this. It means that child elements are shifted and positioned relatively to the parent.
And position property must be also set for the child element, but instead, there has to be absolute value. Then, we use left properly to shift element to the middle of content and margin-left property adjusts position of the child so it stays strictly in the center. However, you have to explicitly set width value for your block, otherwise the code may not work as you want.
HTML code
<div class="parent">
<div class="child">Hello World</div>
</div>CSS code
.parent {
position: relative;
}
.child {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}If the width of child element is not known, then it’s also possible to use another solution. You can shift element by using transform property which is set to the appropriate value, as shown below.
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}In addition, there is another method, you can position child element by using margin auto rule. However, both width and height properties of the parent element must be set to some known values. For example, width is set to 100% and height is 100px, see it in the code example.
CSS code
.parent {
position: relative;
width: 100%;
height: 100px;
}
.child {
position: absolute;
margin: auto;
width: 200px;
height: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}This article contains information only about the most popular methods of centering div element horizontally inside of parent element. Of course, there may be additional variations of each of the code blocks shown above.
Also, we have to note that you may need to modify our examples to make them work correctly in your HTML code. Class names or block IDs may be renamed, or even you can use some other elements, not only divs. Those CSS rules are generic and may be applied to spans, paragraphs, headers or any other containers. However, in such case, you have to ensure you always set correct display property type.
Comments