在div中居中div？

Question

我试图将三个div框居中放置在一个大框内。 一个网格将是3宽和自动高度。

 .t-box920g { width: 960px; height: auto; background: #121212; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; position: relative; overflow: auto; border: 1px dotted #363636; padding-top: 10px; padding-bottom: 10px; text-align: center; } .i-box { width: 279px; height: 209px; background: #ffffff; margin-right: auto; margin-left: auto; float: left; display: inline; text-align: justify; } .i-pbox { width: 276px; height: 206px; background: #121212; border: solid 2px #ffffff; margin-left: auto; margin-right: auto; text-align: justify; } #i-imageconstrain { width: auto; height: auto; max-width: 276px; max-height: 206px; min-width: 276px; min-height: 206px; overflow-x: hidden; overflow-y: hidden; } 

 <div class="t-box920g"> <div class="i-box"> <div class="i-pbox"> <a data-fancybox="gallery" href="images/gallery/sample1.jpg"> <img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" /> </a> </div> </div> <div class="i-box"> <div class="i-pbox"> <a data-fancybox="gallery" href="images/gallery/sample2.jpg"> <img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" /> </a> </div> </div> <div class="i-box"> <div class="i-pbox"> <a data-fancybox="gallery" href="images/gallery/sample3.jpg"> <img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" /> </a> </div> </div> </div> 

除了保留左对齐的t-box920g内容之外，所有内容均按计划进行。 我已经尝试了很多组合，但到目前为止都没有奏效。 有建议吗？ 如果我已经尝试过，我会通知您。

尝试使用text-align，align-content，align-items，margin：针对所有CSS自动组合。

我希望它以合理的间距居中对齐。 其实都剩下了。

Answer 1

使用flexbox。 如果您想通过游戏学习，可以在这里和这里阅读有关如何使用它的更多信息。

这个问题已经在Stack Owerflow上被问及回答过一次，例如在这里 。

 .t-box920g { display: flex; justify-content: space-between; align-items: center; } .t-box920g .i-box { background-color: blue; width: 32%; } 

 <div class="t-box920g"> <div class="i-box"> <div class="i-pbox"> <a data-fancybox="gallery" href="images/gallery/sample1.jpg"> <img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" /> </a> </div> </div> <div class="i-box"> <div class="i-pbox"> <a data-fancybox="gallery" href="images/gallery/sample2.jpg"> <img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" /> </a> </div> </div> <div class="i-box"> <div class="i-pbox"> <a data-fancybox="gallery" href="images/gallery/sample3.jpg"> <img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" /> </a> </div> </div> </div>