How can i place <div>
in center horizontally which is inside another <div>
using CSS?
I don't want to use position:absolute
property
Example code:
<div class="MainDiv">
<div class="InnerDiv">
Place this in center
</div>
</div>
You can simply place horizontally aligned div inside div(without using position: absolute) by using margin:0 auto
property in CSS
Code
.MainDiv{
width: 100%;
}
.InnerDiv{
display: table;
margin: 0 auto;
}
Another alternative method to horizontally centralizing div is using the below css code
CSS
.MainDiv{
width: 100%;
text-align: center;
}
.InnerDiv{
display: inline-block;
}
the above code will place .InnerDiv in the middle
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly