如果它具有浮动样式，如何使它的父级的div居中

Question

<div class="parent"> 
    <div style="float:left"></div>
</div>

当孩子div具有float样式时，如何将其置于其父级中心？

抱歉，我的英语很差，我无法准确描述我的问题。

我使用以下图片来描述希望你能理解

Answer 1

您可以使用position: absolute和transform: translateX的组合：

.parent {
  height: 50px;
  border: solid 1px red;
  margin-bottom: 10px;
}

.child {
  width: 50px;
  height: 50px;
  border: solid 1px blue;
  
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}

<div class="parent"> 
  <div class="child"></div>
</div>
  
<div class="parent"> 
  <div class="child" style="float: left"></div>
</div>
  
<div class="parent"> 
  <div class="child" style="float: right"></div>
</div>

无论孩子是否具有float样式，这都有效。

JSBin

Answer 2

如果元素是，或者不是display:table/table-cell，您可以使用floated。

＆＃13;

＆＃13;

html{
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html,body{
    margin:0;
    width:100%;
}

.parent{
    width:100%;
    display:table;
}

.parent>div{
    display:table-cell;
    border:1px solid black;
    width: calc(100% /5);
    float:left;
    text-align: center;
}

＆＃13;

<div class="parent"> 
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 3

使用此代码：

.parent {
   margin: 0 auto;
   width: /*same like float div*/;
}