How to align a div within a div in cener (CSS)

If you want to center align a div in a page, it can be achieved by putting the div inside another div (for example, by creating a new outer div.) And then, applying the following css code snippet will align the inner div in center.

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

#in {
 display: inline-block;
 }

For example, for the following html code:

<div class="out">
    <div class="in">
        
    <div>
    
</div>

as shown in the figure below, the inner div is aligned in center when the following css code is used.