Horizontally Center A Div In Another Div With Width 100%




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;
}






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.