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.
Watch Video of this Content on Video Streaming