html - 在父 div 中居中子 div

Question

我有一个必须保持 100% 的父 div，里面有 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/

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/

Answer 2

Flex解​​决方案：设置justify-content: center;为父元素：

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

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

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

Answer 3

.child {

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

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