If you are reading this, I'm sure you must be in a search for a way to bring the text in the center inside a <div> tag. well, you are not alone. There are so many web developers out there who are in search for the ways to center text in a and guess what, I'm going to tell you three simple ways to center text in a tag.
There are three simple ways to achieve these and we are going to look at them one by one. So let's begin.
1. Center the Text inside a <div> using CSS Transform Property
We can use the CSS Transform property to center the Text inside a tag. Well, This is a lengthy method. But it works. Lets see how to do it.
Firstly remove the Default CSS applied by the browser. use universal operator (*) to Remove the Default CSS values which are applied by the browser. See the code CSS below
*{
margin:0;
padding:0;
box-shadow:border-box;
}The above code will remove the Default CSS which is applied by the browser automatically.
* Use the above Step only when you have single <div> On the entire Page. For Other Situations try the Other Methods. *
After you have successfully removed the Default CSS Next copy paste the below CSS code in the CSS of your Tag.
.main{
height:100vh;
width:100vw;
}This above code will give the the height and Width Equal to the Screen of the Display respectively. As i mentioned above this method is only for the situation wherein you have only one tag within the whole page.
Once you complete the above step, copy-paste the below CSS code in CSS of your Text element. In my case its the (paragraph) element.
p{
position: absolute;
top:50%;
width:100%;
text-align:center;
transform: translateY(-50%);
}That's it, this will Bring your Text exactly in the center. As you can see below
See the Entire code Below
<!DOCTYPE html>
<html>
<head>
<title>center text</title>
<style type="text/css">
*{
margin:0;
padding:0;
box-shadow:border-box;
}
.main{
height:100vh;
width:100vw;
}
p{
position: absolute;
top:50%;
width:100%;
text-align:center;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="main">
<p>some Text here</p>
</div>
</body>
</html>2. Center the Text inside a <div> using CSS FlexBox
Another way of bringing the text in the center inside a <div> tag is by using CSS Flexbox and believe me its much simple then the above method. lets see how
using this Method you can bring the text in the center inside a <div> tag by just 3 lines of CSS Code. just copy-paste the below CSS code in the CSS Styling of your <div> tag.
.mydiv{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}Thats it, By adding the above 3 lines your text will appear exactly in the center of your div as you can see below
You can see the full code below
<!DOCTYPE html>
<html>
<head>
<title>center text</title>
<style type="text/css">
.mydiv{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="mydiv">
<h2>Some Text here</h2>
</div>
</body>
</html>3. Center the Text inside a <div> using CSS Grid
This is the Easiest Method. in this method just Two lines of code will do your job, lets see how
Just Copy and paste the below below CSS Code inside the styling of your <div> tag
.mydiv{
width: 100vw;
height: 100vh;
display: grid;
place-items:center;
}By Adding The above 2 lines of that is Display:Grid; and place-items:center; it will bring your text in the center. see the result below
see the full code below
<!DOCTYPE html>
<html>
<head>
<title>center text</title>
<style type="text/css">
.mydiv{
width: 100vw;
height: 100vh;
display: grid;
place-items:center;
}
</style>
</head>
<body>
<div class="mydiv">
<h2>Some Text here</h2>
</div>
</body>
</html>That's All, If you have any Doubts or Queries do let me know in the comment section below.
and hey, if You want to learn about CSS Flexbox and CSS Grid you can Learn it By clicking the link below
Post a Comment