In this post, we will learn how to align a div horizontally center using CSS. If we want to align a div horizontally center, we use this simple trick. With the help of this trick, you will be able to align text horizontally center with just one line of CSS code. 


How To Align A DIV Horizontally Center Using CSS ?


Align A DIV Horizontally Center

To align a div horizontally center we use margin: 0 auto; CSS property. With the help of this property we can easily align a div horizontally center. For this we set the value of margin, 0 from top and bottom side and auto from left and right side. The auto value automatically align the div horizontally center. 


<!DOCTYPE html>
<html>
<head>
<title>How To Align Text Horizontally Center In A DIV Container Using CSS ?</title>
<style>

div {
width: 300px;
height: 300px;
margin: 0 auto;
border: 2px solid #000;
}

</style>
</head>
<body>

<div>
<p>This is example text. </p>
</div>

</body>
</html> code-box



Summary

In this post we learned how to align a div horizontally center using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post