Horizontally Center A Div In Another Div With Width 100%

Horizontally Center A Div In Another Div - Method 1

Suppose we have two div with ID outerDiv and innerDiv. The outerDIv has width 100% with yellow background. Lets consider how to set innerDiv horizontally center inside the outerDiv. For achieving this, we can set following style for the innerDiv.

margin : 0px auto
display : table
We don't have to adjust the width of innerDiv.

#innerDiv {
     margin: 0 auto;
     display: table;
}



Horizontally Center A Div In Another Div - Method 2

Suppose we have two div with ID outerDiv and innerDiv. The outerDIv has width 100% with yellow background. The outerDiv has style for text-align as center; Now for the innerDiv, the only required style is as follows.

display:inline-block.

#outerDiv {
     text-align: center;
     width: 100%;
}

#innerDiv {
     display: inline-block;
}


By this way we can Horizontally Center A Div Within Another Div.