如何在父div中水平居中div答案

【问题标题】：How to center horizontally div inside parent div如何在父div中水平居中div
【发布时间】：2020-12-13 05:13:58
【问题描述】：

如何将div 水平居中于其父级div 与CSS？

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

【问题讨论】：

这里有两种简单的方法可以让 div 在 div 中居中，垂直、水平或两者（纯 CSS）：stackoverflow.com/a/31977476/3597276

标签： html css

【解决方案1】：

我假设父 div 没有宽度或宽度较宽，而子 div 的宽度较小。下面将设置顶部和底部的边距为零，并自动调整边距。这使 div 居中。

div#child {
    margin: 0 auto;
}

【讨论】：

@马克。你知道如何让它在 IE6 中工作吗？ IE6确实很烂，但还是有人在用。
@Bakhtiyor：据我所知，确实如此。你看到什么问题？如果您遇到了一些以前没有涉及过的特定问题，您可能想提出一个新问题。不过，我无权访问 IE6。
@Bakhtiyor：实际上已经考虑过了，我认为在 IE.old 中，您还需要在 parent div 上设置 text-align: center;，然后将其设置回左侧（或其他） child 一。不确定这个问题是否会影响 IE6...
@Mark & @Bakhtiyor 出于某种原因，我的child div 似乎向左移动——与更符合标准的浏览器相比——在我检查的所有版本的 IE 中(IE6-8)。并且text-align: center; 用于parent 和text-align: left; 用于child 为所有这些版本修复了它。

【解决方案2】：

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

【讨论】：

此方案支持IE 6，但不要忘记在#child div 中添加text-align:left;
text-align:center 到子 div 还是父 div？

【解决方案3】：

只是出于兴趣，如果您想将两个或多个 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>

【讨论】：

【解决方案4】：

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child-canvas {
  flex-shrink: 0;
}

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

【讨论】：