How To

How to Center a Div Tag With CSS

Generally, on a webpage, we have so many headings and images. It should be at the center position. So the visitor can directly notice them and find the exact topic which he/she wants to read very quickly. We can also use this method to highlight some of the topics of the page.

We can use different methods for positioning the text and images at the center. The following are some of the best ways of centralizing the text.

Index

Toggle

Method 1

Use of <center> tag :

This is the simplest method for centralizing the text of <div> tag. We use <center> tag before <div> tag and it will horizontally center the text.

<!DOCTYPE html>
<html>
<head>
<style>
.style {
padding: 10px;
}
</style>
</head>
<body>

<center><div class="style">
<p>I am at center position !</p>
</div><center>

</body>
</html>

Explanation:

Here we add a center tag to make the image horizontally center position.

Method 2

Use the text-align method :

The text-align method is used for positioning the text on the web page. For centralizing the text, we can use text-align: center in the style of the page.

<!DOCTYPE html>
<html>
<head>
<style>
.style {
text-align:center;
padding: 10px;
}
</style>
</head>
<body>

<div class="style">
<p>I am at center position !</p>
</div>

</body>
</html>

Explanation:

Here we add text-align: center in the style of the <div> tag. It will position the text at the center.

Method 3

Margin: 0 auto method:

In this method, we use the margin property of the CSS. It is used for positioning the text on the webpage. Here we want to position the text at the center, so we add margin: 0 auto in the style of the <div> tag.

<!DOCTYPE html>
<html>
<head>
<style>
.style {
margin: 0 auto;
width:250px;
padding: 10px;

}
</style>
</head>
<body>

<div class="style">
<p>I am at center position !</p>
</div>

</body>
</html>

Explanation:

Here we add margin: 0 auto in style of the <div> tag. It will position the image at the center.

Note:

When we use margin: 0 auto property, we must declare the width property of the same tag. Without a declaration of width property, we can not see the effect of margin: 0 auto property.

Method 4

The Absolute method:

This method removes the element from the simple flow of the page, and we can set the element wherever we want to set it. Suppose we want to set text at the center position then we can do it as follows:

<!DOCTYPE html>
<html>
<head>
<style>
.style {
position: absolute;
left: 50%;
padding: 10px;

}
</style>
</head>
<body>

<div class="style">
<p>I am at center position !</p>
</div>
</body>
</html>

Explanation:

Here we first set the position absolute and then for centralizing text we set the left property of the <div> tag to 50%.

Note:

Suppose we want to position the text at exactly the middle of the page then we can use the following style property.

<style>
.style {
position: absolute;
left: 50%;
top: 50%
padding: 10px;
}
</style>

Here we set left and to property after positioning of the tag to absolute. It will position the text in the middle of the page by its edges. It doesn’t seem to be precisely at the center.

We must use the transform property of CSS to position the text at the center by its center point. We can do so as follows:

<style>
.style {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 10px;
}
</style>

Here we set transform: translate(-50%,-50%) and it will position precisely the middle of the webpage.

Method 5

The flex method:

This method is the most popular and commonly used for positioning the text and image. The popularity of this method is because it makes the text and image responsive. It does not need to set margin property according to the size of the screen.

In this method, we first set the display property to flex. Then we set align-items, and at last, we set justify-content of the page.

<!DOCTYPE html>
<html>
<head>
<style>
.style {
display: flex;
align-self: center;
justify-content: center;
height: 100%;
}
</style>
</head>
<body>

<div class="style">
<p>I am at center position !</p>
</div>

</body>
</html>

Steps:

First, we set the display property to flex.
Next, we set the align-item to center. It sets the text and image vertically center position.
Then we set justify-content to center. It sets the text and image horizontally middle position.

How to put an image at the center position?

Method 1

The flex method:

The flexbox methos is the most commonly used method for positioning the image at the center position. The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
.style {
display: flex;
align-self: center;
justify-content: center;
}
</style>
</head>
<body>

<div class="style">
<img src="download.png" alt="Paris" >

</div>

</body>
</html>

Explanation:

The above code sets the image at the center of the <div> tag. It is the easiest and most commonly used method for positioning the image at the center position.

Method 2

The block method:

In this method, we set the display property to block, and then we set margin-left and margin-right to auto. It will position the image at the center of the webpage.

<!DOCTYPE html>
<html>
<head>
<style>
.style {
display: block;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>

<div >
<img class="style" src="download.png" alt="Paris" >

</div>
</body>
</html>

Explanation:

First, we set the value of display property to block.
Next, we set margin-right to auto.
Then we set margin-left to auto.
It will set the image at the center position of the page.

Note: In this method, we have to apply the above property to <img> tag of HTML. If we use display: block property to <div> tag then we cannot see the result of our changes.

Conclusion

These are the different methods for positioning the text as well as images at the center of the webpage. Users can use these methods according to the requirements to make the page more attractive and user friendly.

I hope you have found this post fully informative and helpful.

Thank you for reading 🙂

Nachiket Panchal

Founder & Administrator of `errorsea` Having interest in Programming & Technology.