【问题标题】：How to center inner div? [duplicate]如何使内部div居中？ [复制]
【发布时间】：2019-02-16 19:18:54
【问题描述】：

我有两个 div：

<div class='container'>
  <div class='left'></div>
  <div class='center'></div>
</div>

我想将第二个 div 居中（“中心”），

并将第一个内部 div 放置在中间 div 的左侧。我用 chrome 试了几个小时，但它不起作用。

【问题讨论】：

stackoverflow.com/questions/50852584/…stackoverflow.com/questions/52221686/…

标签： css

【解决方案1】：

.left {
  float :left;
  width: 10%;
  margin-left: 10%;
  background: green;
}

.center {
  width: 60%;
  margin: 0 auto;
  background: red;
}

.main {
  width: 100%;
  background: yellow;
}

<div class="main">
  <div class="left">&nbsp;</div>
  <div class="center">&nbsp;</div>
</div>

【讨论】：

我认为 OP 希望让绿色 div 粘在红色上 - 当然与分辨率无关。
可以通过添加正确的边距来解决
如果你不知道.center的宽度怎么办？它可能有width: min-content;。
那么我猜应该求助于flex和justify-content

【解决方案2】：

这是一个没有 flexbox 的解决方案：

.main {
  text-align: center;
}

.main__inner {
  display: inline-block;
  position: relative;
}

.left {
  border: 1px solid tomato;
  position: absolute;
  right: 100%;
}

.center {
  border: 1px solid cyan;
}

<div class='main'>
  <div class='main__inner'>
    <div class='left'>left</div>
    <div class='center'>center</div>
  </div>
</div>

【讨论】：

【解决方案3】：

要将左侧元素定位到尽可能靠左的位置，您可以使用中心元素的边距，如下所示。

边框和背景颜色是出于可见性目的，不是必需的。

.main {
  display: flex;
  justify-content: center;
  width: 100%;
  border: thin solid black;
}

.left {
  background-color: red;
  height: 50px;
}

.center {
  background-color: blue;
  height: 50px;
  margin: 0 auto;
}

<div class='main'>
  <div class='left'>Left</div>
  <div class='center'>Center</div>
</div>

【讨论】：

【解决方案4】：

这是我想出的：

.main>* {
  display: inline-block;
  width: 33%;
}

<div class='main'>
  <div class='left'>abc</div>
  <div class='center'>def</div>
</div>

如图所示here。

另一种解决方案

此解决方案将始终将.left 放在首位。

HTML

<div class='main'>
  <div class='center'>def</div>
  <div class='left'>abc</div>
</div>

CSS

.main {
  display: flex;
  flex-flow: row;
  flex-wrap: no-wrap;
}
.main > .left {
  order: 1;
}
.main > .center {
  order: 2;
}

如果您希望您的内盒具有相同的宽度：

.main > * {
  flex-basis: 33%;
}

【讨论】：

【解决方案5】：

你可以试试这个

.A {
  display: flex;
  justify-content: center;
}

.B {
  background-color: red;
  position: absolute;
  right: 100%;
  top: 0;
}

.C {
  background-color: cyan;
  position: relative;
}

.C,
.B {
  border-radius: 4px;
  padding: 8px 24px;
}

<div class="A">
  <div class="C">
    <div class="B">left text</div>
    center text
  </div>
</div>

【讨论】：

你改变了 HTML 结构。

【解决方案6】：

试试下面的

.center{max-width:300px; margin:0 auto; overflow:hidden;}
.center .innerDiv {float:left; width:50%;}

<div class="center">
<div class="innerDiv"></div>
</div>

【讨论】：

你有没有试过在这里运行你自己的代码？