如何在父元素中水平居中子元素div

Question

如何使用 CSS 将一个 div 水平居中在其父级 div 中？

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

- Eagle

---

这里有两种简单的方法可以在div中心垂直、水平或同时居中（纯CSS）：https://dev59.com/bmct5IYBdhLWcg3wmOZN#31977476 - Michael Benjamin

Answer 1

假设父级div没有宽度或者宽度很宽，而子级div有一个较小的宽度。以下代码将把顶部和底部的外边距设置为零，两侧自动适应宽度。这样可以使子级div居中。

div#child {
    margin: 0 auto;
}

- Mark Embling

---

@Mark。你知道如何让它在IE6中工作吗？IE6真的很糟糕，但仍然有一些人在使用它。 - Bakhtiyor

@Bakhtiyor：就我所记得的，它是可以的。你遇到了什么问题？如果有一些特定的问题还没有被解决，你可能需要打开一个新的问题。不过我没有IE6来进行检查。 - Mark Embling

@Bakhtiyor：实际上，在考虑了一下之后，我认为在IE.old中，您还需要在parent div上设置text-align: center;，然后再将其设置回左对齐（或其他对齐方式）以供child使用。不确定这个问题是否影响IE6... - Mark Embling

@Mark和@Bakhtiyor，由于某种原因，我发现我的child div在所有我检查过的IE版本（IE6-8）中似乎向左移动了--与更符合标准的浏览器相比。对于parent使用text-align: center;，对于child使用text-align: left;可以解决所有这些版本的问题。 - brookmarker

Answer 2

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

- James Goodwin

---

这个解决方案支持IE 6，但不要忘记在#child div中添加“text-align:left;”。 - Moak

将 text-align:center 应用到子 div 还是父 div？ - Anish Nair

Answer 3

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

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

- Grigor Nazaryan

Answer 4

如果您想将两个或多个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>   

- Paul Chris Jones

Answer 5

您可以在左右margin中使用“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>

- x4u

Answer 6

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

- Soufiane Hassou