Html 如何在父div内水平居中div

如何使用

CSS

将

div

水平居中于其父

div

中

<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的两侧平均分配可用空间：

<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>   

第一组
第2组

此解决方案支持IE 6，但别忘了添加

文本对齐：左

至#子div

文本对齐：居中

至子div或父div？标记。你知道如何让它在IE6中工作吗？IE6真的很烂，但仍然有一些人在使用它。@Bakhtiyor:据我记忆所及，它确实如此。你看到了什么问题？如果你遇到了一些以前从未涉及过的具体问题，你可能想提出一个新问题。但是我没有访问IE6的权限进行检查。@Bakhtiyor:实际上已经考虑过了，我认为在IE.old中，您还需要设置

text align:center父项

div上进行code>，然后将

子项

设置回左侧（或任何位置）。不确定这个问题是否会影响IE6…@Mark&@Bakhtiyor出于某种原因，在我检查的所有IE版本（IE6-8）中，我的

child

div似乎都向左移动了——与更符合标准的浏览器相比。和

文本对齐：居中父项
和
文本对齐：左子版本
的code>修复了所有这些版本的div。这里有两种简单的方法可以在div中垂直、水平或两者（纯CSS）居中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 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>   

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

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