How can I center div inside Div using CSS?

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

Asked by:- jaiprakash
: 2354 At:- 7/12/2017 3:40:47 PM
CSS HTML center-align alignment

1 Answers
profileImage 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

Using Margin-Auto


  width: 100%; 

  display: table;
  margin: 0 auto;

Using Flexbox

    width: 100%;
    /* center a div insie another div*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    width: 100px;
    height: 60px;
    margin: 10px;

and sample HTML

<div class="container">
    <div class="innerDiv">
        <b>Content Here</b>

here is the working fiddle:

Another alternative method

to horizontally centralizing div is using the below css code


  width: 100%;
  text-align: center;

  display: inline-block;

the above code will place .InnerDiv in the middle

You can use any of the above methods to center div inside div using CSS.

At:- 7/12/2017 3:52:49 PM Updated at:- 9/20/2022 12:53:08 AM
thanks, it worked for me 0
By : jaiprakash - at :- 8/13/2017 12:46:58 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use