居中子元素 div 在父元素 div 内部

Question

我有一个父div，它必须保持100%的宽度，里面有3个子div。我需要将这3个子div居中，但不知道怎么做。

.parent {
    width: 100%;    
    border: 1px solid blue;
}
    
.child {
    float: left;    
    border: 1px solid red;
    margin: 2px;
}

<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2 - center us child divs! :)</div>
    <div class="child">child3</div>
    <div style="clear: both"></div>
</div>

这里是一个JSFiddle：

http://jsfiddle.net/qdHH3/2/

- flying227

---

孩子们需要浮动吗？ - j08691

Answer 1

尝试使用 display: inline-block 和 text-align: center

.parent {
    width: 100%;
    border: 1px solid blue;
    text-align: center;
}

.child {
    display: inline-block;  
    border: 1px solid red;
    margin: 2px;
}

jsFiddle: http://jsfiddle.net/qdHH3/3/

- Christian

---

有一个关于inline-block对齐的问题值得注意（也许你不在意）：当你添加它时，它往往会在子元素之间添加这个烦人的空白。为了消除这个问题，您需要在父div中设置white-space: nowrap;，然后确保源代码中的子div之间没有实际空格（字面上是...</div><div class="chi..."）。如果子元素之间的距离需要特定的量（如果有），则这一点非常重要。 - roobeedeedada

@roobeedeedada 很好的观点，老实说这个答案已经有几年了，我不再推荐使用 inline-block 进行布局（它总是有点 hacky）。Flexbox 解决了很多这些问题。 - Christian

Answer 2

Flex解决方案：将justify-content: center;设置到父元素中：

.parent, .child { border: 1px solid #000; }

.parent {
  display: flex;
  min-height: 50vh;
  justify-content: center;
  align-items: center; /* To align vertically, if needed */
}

<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2 - center us child divs! :)</div>
    <div class="child">child3</div>
</div>

另一种方法是在弹性父元素内部利用子元素的margin属性的力量——特别适用于居中单个元素。

.parent, .child { border: 1px solid #000; }

.parent {
  display: flex;
  min-height: 50vh;
}

.child {
  margin: auto;
}

<div class="parent">
    <div class="child">child1</div>
</div>

- Roko C. Buljan

---

这是一种更好的解决方案，因为子元素不会继承居中对齐的文本。 - Nathaniel Rink

Answer 3

.child {

    $box-size: 100%;
    
    width: $box-size;
    height: $box-size;

    display: flex;  
    justify-content: center;
    align-items: center;
}

- Daniel Duong

Answer 4

.parent {
    width: 100%;    
    border: 1px solid blue;
}
    
.child {
    float: left;    
    border: 1px solid red;
    margin: 2px;
}

<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2 - center us child divs! :)</div>
    <div class="child">child3</div>
    <div style="clear: both"></div>
</div>

- andrei rosa

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined