How can I center div inside Div using CSS?

You can simply place horizontally aligned div inside div(without using position: absolute) by using margin:0 auto property in CSS

Using Margin-Auto

Code

.MainDiv{
  width: 100%; 
}

.InnerDiv{
  display: table;
  margin: 0 auto;
}

Using Flexbox

.container{
    background:yellow;
    width: 100%;
    /* center a div insie another div*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.innerDiv{
    width: 100px;
    height: 60px;
    margin: 10px;
    padding:5px;
    background:blue;
    color:white;
}

and sample HTML

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

here is the working fiddle: https://jsfiddle.net/uofnwkyc/

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

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