how to place div centered inside div?

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>

Asked by:- jaiprakash

: 368 At:- 7/12/2017 3:40:47 PM

CSS HTML center-align alignment

add comment to question

1 Answers

Answered by:- vikas_jk

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

At:- 7/12/2017 3:52:49 PM Updated at:- 7/12/2017 3:53:08 PM

thanks, it worked for me 0

By : jaiprakash - at :- 8/13/2017 12:46:58 PM

comment to above answer

153

Create a simple calculator using Javascript

288

Export html table to excel using jQuery / Javascript

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly

how to place div centered inside div?

Related Articles

Subscribe Now

Related Questions