尝试使用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/

Flex解决方案：set justify-content: center;到parent元素：

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

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

个字符
另一种方法是在flex父元素中利用child的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>

的字符串

.child {

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

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

字符串

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

个字符