如何在父div中水平居中div

我如何居中水平div内的divCSS

 <div id='parent' style='width: 100%;'> <div id='child' style='width: 50px; height: 100px;'>Text</div> </div> 

我假设父div没有宽度或宽度,而小孩div有一个较小的宽度。 以下将把顶部和底部的边距设置为零,并且将边自动调整。 这中心分区。

 div#child { margin: 0 auto; } 
 <div id='parent' style='width: 100%;text-align:center;'> <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div> </div> 
 <div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div> 

您可以使用左侧和右侧边距的“自动”值来让浏览器在内部div的两侧平均分配可用空间:

 <div id='parent' style='width: 100%;'> <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div> </div> 

只是出于兴趣,如果你想要中心两个或更多的div(所以他们并排在中心),那么这里是如何做到这一点:

 <div style="text-align:center;"> <div style="border:1px solid #000; display:inline-block;">Div 1</div> <div style="border:1px solid red; display:inline-block;">Div 2</div> </div>